Својство grid-template-areas
Својство grid-template-areas дефинише
распоређивање елемената у grid-у. Најпре сваком
елементу-детету доделимо име користећи
својство grid-area.
Затим у елементу-родитељу наводимо
својство grid-template-areas,
у ком набрајамо имена елемената-деце
по реду којим желимо да их распоредимо у grid-у.
Синтакса
селектор {
grid-template-areas: имена елемената-деце;
}
Пример
Хајде да дефинишемо распоред наших елемената у grid-у:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#elem1 {
grid-area: first;
}
#elem2 {
grid-area: second;
}
#elem3 {
grid-area: third;
}
#parent {
display: grid;
grid-template-areas: 'second first third';
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Пример
А сада хајде да уместо имена неких
елемената наведемо тачку '.'. Као што се види
из резултата извршеног кода
у овом случају у шеми ће се наћи
празан блок:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#elem1 {
grid-area: first;
}
#elem2 {
grid-area: second;
}
#elem3 {
grid-area: third;
}
#parent {
display: grid;
grid-template-areas: 'first . second third';
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Погледајте такође
-
својство
grid-area,
које дефинише име елемента у grid-у