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 muhtemelen 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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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ütunda 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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center" 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 text-center" 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 text-center" 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 text-center" 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 text-center" 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 text-center" 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 text-center" 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

One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, $grid-columns and $grid-gutter-width. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:

• Modify those default Sass variables and recompile your CSS.
• Use inline or custom styles to augment the provided classes.

For example, you can increase the column count and change the gap size, and then size your “columns” with a mix of inline styles and predefined CSS Grid column classes (e.g., .g-col-4).

<div class="grid text-center" 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>