grid-template-columns

Wartości

Kod HTML


<div class="grid-container">
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
</div>

Kod CSS


.grid-container {
  background: #fff;
  border: 1px solid #bbb;
  height: 160px; 
  display: grid;
}

Zobrazowanie

1fr 2fr 3fr 4fr


.gt-columns {
  grid-template-columns: 1fr 2fr 3fr 4fr;
}

1fr 2fr 1fr 2fr


.grid-container {
  grid-template-columns: 1fr 2fr 1fr;
}

10% 50% 30% 10%


.grid-container {
  grid-template-columns: 10% 50% 30% 10%;
}

Stylowe kategorie

Container