grid-template | Daywalker

Właściwości

wiersze

kolumny

obszary

Kod HTML


<div class="grid-container">
	<div class="grid-item gi-1"></div>
	<div class="grid-item gi-2"></div>
	<div class="grid-item gi-3"></div>
	<div class="grid-item gi-4"></div>
</div>

Kod CSS


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

Zobrazowanie

areas


grid-container {
  grid-template:	
    "A A A" 15px		
    "B C C"	45px
    "B D D" auto ;
}
  .gi-1 { grid-area: A; }
  .gi-2 { grid-area: B; }
  .gi-3 { grid-area: C; }
  .gi-4 { grid-area: D; }

rows / columns


.grid-container {
  grid-template: 
    30px 50px / 1fr 2fr 
}

Stylowe kategorie

Container