CSS Grid'de repeat fonksiyonu

Aynı boyutta birkaç sütununuz varsa, yazımı kolaylaştırmak için repeat fonksiyonunu kullanabilirsiniz. Bu fonksiyonun ilk parametresine sütun sayısı, ikinci parametresine ise genişlikleri yazılır. Haydi örneklerle bunun nasıl çalıştığını görelim.

Örnek

Diyelim ki aynı boyutta üç sütunumuz var:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Yazımı repeat ile kolaylaştıralım:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Örnek

Diyelim ki aynı boyutta üç sütunumuz var, dördüncü sütun ise farklı bir boyutta:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

Yazımı repeat ile kolaylaştıralım:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

Örnek

Diyelim ki ilk üç sütun bir boyutta, ikinci üç sütun ise başka bir boyutta:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

Yazımı repeat ile kolaylaştıralım:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Örnek

Diyelim ki ilk üç sütun bir boyutta, sonra bir sütun daha var, ardından başka bir boyutta üç sütun daha var:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

Yazımı repeat ile kolaylaştıralım:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

Örnek

Bu kolaylaştırma tüm boyut birimleri için çalışır. Örnek olarak, piksel cinsinden üç sütunumuz olsun:

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Yazımı repeat ile kolaylaştıralım:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

Pratik Görevler