CSS Izgarası

Bootstrap'in varsayılan ızgara sistemi, milyonlarca insan tarafından denenmiş ve test edilmiş on yılı aşkın CSS yerleşim tekniğinin doruk noktasını temsil eder. Ancak, yeni CSS Izgarası gibi tarayıcılarda gördüğümüz birçok modern CSS özelliği ve tekniği olmadan da oluşturuldu.

Nasıl çalışır

Bootstrap 5 ile CSS Izgarası üzerine kurulmuş, ancak bir Bootstrap bükümü olan ayrı bir ızgara sistemini etkinleştirme seçeneğini ekledik. Duyarlı düzenler oluşturmak için bir hevesle uygulayabileceğiniz, ancak kaputun altında farklı bir yaklaşımla hala sınıflar alıyorsunuz.

• CSS Izgarası isteğe bağlıdır. Ayarlayarak varsayılan ızgara sistemini devre dışı bırakın ve ayarlayarak $enable-grid-classes: falseCSS Izgarasını etkinleştirin $enable-cssgrid: true. Ardından, Sass'ınızı yeniden derleyin.

• .rowile örneklerini değiştirin .grid. Sınıf , HTML'nizle oluşturduğunuz bir .gridöğeyi ayarlar display: gridve oluşturur .grid-template

• .col-*Sınıfları sınıflarla değiştirin .g-col-*. grid-columnBunun nedeni, CSS Izgara sütunlarımızın width.

• Sütunlar ve oluk boyutları CSS değişkenleri aracılığıyla ayarlanır. Bunları üst öğede ayarlayın ve satır içi veya stil sayfasında ve .gridile istediğiniz gibi özelleştirin .--bs-columns--bs-gap

Gelecekte, gapözellik flexbox için neredeyse tam tarayıcı desteği elde ettiğinden, Bootstrap büyük olasılıkla hibrit bir çözüme geçecek.

Temel farklılıklar

Varsayılan ızgara sistemiyle karşılaştırıldığında:

• Flex yardımcı programları, CSS Izgara sütunlarını aynı şekilde etkilemez.

• Boşluklar olukların yerini alır. Özellik , varsayılan ızgara sistemimizdeki gapyatayın yerini alır ve daha çok .paddingmargin

• Bu nedenle, s'nin aksine .row, .grids'nin negatif marjları yoktur ve marj yardımcı programları ızgara olukları değiştirmek için kullanılamaz. Izgara boşlukları varsayılan olarak yatay ve dikey olarak uygulanır. Daha fazla ayrıntı için özelleştirme bölümüne bakın.

• Satır içi ve özel stiller, değiştirici sınıfların (örneğin, style="--bs-columns: 3;"vs class="row-cols-3") yerine geçmelidir.

• İç içe yerleştirme benzer şekilde çalışır, ancak iç içe geçmiş her bir örneğindeki sütun sayınızı sıfırlamanızı gerektirebilir .grid. Ayrıntılar için yuvalama bölümüne bakın.

Örnekler

Üç sütun

.g-col-4Sınıflar kullanılarak tüm görünüm pencerelerinde ve cihazlarda üç eşit genişlikte sütun oluşturulabilir . Görünüm alanı boyutuna göre düzeni değiştirmek için duyarlı sınıflar ekleyin .

<div class="grid">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Duyarlı

Görünüm pencerelerinde düzeninizi ayarlamak için duyarlı sınıfları kullanın. Burada en dar görünüm pencerelerinde iki sütunla başlıyoruz ve ardından orta görünüm pencerelerinde ve üzerinde üç sütuna çıkıyoruz.

<div class="grid">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

Bunu, tüm görünüm alanlarındaki bu iki sütun düzeniyle karşılaştırın.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Sarma

Yatay olarak yer kalmadığında ızgara öğeleri otomatik olarak bir sonraki satıra kaydırılır. gapIzgara öğeleri arasındaki yatay ve dikey boşluklar için geçerli olduğunu unutmayın .

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

başlar

Başlangıç ​​sınıfları, varsayılan ızgaramızın ofset sınıflarını değiştirmeyi amaçlar, ancak bunlar tamamen aynı değildir. CSS Grid, tarayıcılara "bu sütundan başlamalarını" ve "bu sütunda bitirmelerini" söyleyen stiller aracılığıyla bir ızgara şablonu oluşturur. Bu özellikler grid-column-startve grid-column-end. Başlangıç ​​sınıfları, eskilerin kısaltmasıdır. Sütunlarınızı istediğiniz şekilde boyutlandırmak ve hizalamak için bunları sütun sınıflarıyla eşleştirin. Başlangıç ​​sınıfları , bu özellikler için geçersiz bir değer 1olarak başlar.0

<div class="grid">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

Otomatik sütunlar

Izgara öğelerinde sınıf olmadığında ( a öğesinin en yakın çocukları .grid), her ızgara öğesi otomatik olarak bir sütuna boyutlandırılacaktır.

<div class="grid">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Bu davranış, ızgara sütun sınıflarıyla karıştırılabilir.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

yuvalama

Varsayılan ızgara sistemimize benzer şekilde, CSS Izgaramız, s'lerin kolayca iç içe yerleştirilmesine izin verir .grid. Ancak, varsayılanın aksine, bu ızgara satırlar, sütunlar ve boşluklardaki değişiklikleri devralır. Aşağıdaki örneği düşünün:

• Yerel bir CSS değişkeni ile varsayılan sütun sayısını geçersiz kılıyoruz: --bs-columns: 3.
• İlk otomatik sütunda, sütun sayısı devralınır ve her sütun kullanılabilir genişliğin üçte biridir.
• İkinci otomatik sütunda, iç içe geçmiş sütun sayısını .grid12'ye (varsayılanımız) sıfırladık.
• Üçüncü otomatik sütunda iç içe geçmiş içerik yok.

Pratikte bu, varsayılan ızgara sistemimizle karşılaştırıldığında daha karmaşık ve özel düzenlere izin verir.

<div class="grid" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

özelleştirme

Yerel CSS değişkenleriyle sütun sayısını, satır sayısını ve boşlukların genişliğini özelleştirin.

Bu CSS değişkenlerinin varsayılan değeri yoktur; bunun yerine, yerel bir örnek sağlanana kadar kullanılan yedek değerleri uygularlar . Örneğin, henüz hiçbir yerde ayarlanmadığı için var(--bs-rows, 1)yok sayan CSS Izgara satırlarımız için kullanıyoruz. --bs-rowsOlduğunda, .gridörnek, geri dönüş değeri yerine bu değeri kullanacaktır 1.

Izgara sınıfı yok

Hemen alt öğeleri ızgara öğeleridir , bu nedenle açıkça bir sınıf .grideklemeden boyutlandırılırlar ..g-col

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Sütunlar ve boşluklar

Sütun sayısını ve boşluğu ayarlayın.

<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Satır ekleme

Daha fazla satır ekleme ve sütunların yerleşimini değiştirme:

<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

boşluklar

Dikey boşlukları yalnızca row-gap. gaps üzerinde kullandığımızı .grid, ancak row-gapgerektiğinde column-gapdeğiştirilebileceğini unutmayın.

<div class="grid" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

gapBu nedenle, tek bir değer (tüm taraflar) veya bir çift değer (dikey ve yatay) alabilen farklı dikey ve yatay s'lere sahip olabilirsiniz. Bu, için satır içi stille gapveya --bs-gapCSS değişkenimizle uygulanabilir.

<div class="grid" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

küstah

CSS Izgarasının bir sınırlaması, varsayılan sınıflarımızın hala iki Sass değişkeni $grid-columnsve $grid-gutter-width. Bu, derlenmiş CSS'mizde oluşturulan sınıfların sayısını etkin bir şekilde önceden belirler. Burada iki seçeneğiniz var:

• Bu varsayılan Sass değişkenlerini değiştirin ve CSS'nizi yeniden derleyin.
• Sağlanan sınıfları genişletmek için satır içi veya özel stiller kullanın.

Örneğin, sütun sayısını artırabilir ve boşluk boyutunu değiştirebilir ve ardından "sütunlarınızı" satır içi stiller ve önceden tanımlanmış CSS Izgarası sütun sınıfları (örneğin, .g-col-4) karışımıyla boyutlandırabilirsiniz.

<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>