CSS Grid Generator
ToolHQ ile CSS Grid layout kodunu görsel olarak oluşturun.
1
2
3
4
5
6
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px;
How to use CSS Grid Generator
1
Adım 1: Grid Düzeninizi Seçin
Kılavuz düzeniniz için satır ve sütun sayısını seçin. Önceden tasarlanmış çeşitli şablonlardan seçim yapabilir veya sıfırdan özel bir düzen oluşturabilirsiniz.
2
Adım 2: Grid Öğeleri Ekleyin
ToolHQ'daki grid öğelerini sürükle ve bırak yöntemiyle düzeninize taşıyarak görsel olarak çekici bir tasarım oluşturun. Her öğenin boyutunu, rengini ve konumunu gerektiği şekilde ayarlayabilirsiniz.
3
Adım 4: CSS Kodu Oluştur
Grid düzeninizi tasarladıktan sonra, HTML dosyanıza kopyalayıp yapıştırabileceğiniz özel CSS kodunu almak için 'Generate CSS' düğmesine tıklayın.