Za pomocą właściwości grid-area oraz z góry zdefiniowanej grupy wartości możemy określić, które linie wierszowe i kolumnowe siatki elementu HTML tworzącego układ siatki mają stanowić początkową oraz końcową krawędź wierszową i kolumnową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
grid-area:2 /3 /r6 /c7;
}
/* REGUŁA - 2 */
div {
grid-row-start:2;
grid-column-start:3;
grid-row-end:r6;
grid-column-end:c7;
}
- row-start
-
Składnik row-start jest wymaganym składnikiem grupy wartości właściwości grid-area. Składnik row-start określa wartość właściwości grid-row-start, czyli to, która linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić początkową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
- /column-start
-
Składnik column-start jest wymaganym składnikiem grupy wartości właściwości grid-area. Składnik column-start określa wartość właściwości grid-column-start, czyli to, która linia kolumnowa siatki elementu HTML tworzącego układ siatki ma stanowić początkową krawędź kolumnową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
- /row-end
-
Składnik row-end jest wymaganym składnikiem grupy wartości właściwości grid-area. Składnik row-end określa wartość właściwości grid-row-end, czyli to, która linia wierszowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź wierszową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
- /column-end
-
Składnik column-end jest wymaganym składnikiem grupy wartości właściwości grid-area. Składnik column-end określa wartość właściwości grid-column-end, czyli to, która linia kolumnowa siatki elementu HTML tworzącego układ siatki ma stanowić końcową krawędź kolumnową miejsca, do którego powinien zostać przypisany interesujący nas element HTML.
grid-area:2 /3 /6 /5;
Początkową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", która posiada numer "2", natomiast początkową krawędź kolumnową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia kolumnowa siatki przykładowego elementu "div#gridbox", która posiada numer "3", dodatkowo końcową krawędź wierszową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia wierszowa siatki przykładowego elementu "div#gridbox", która posiada numer "6", ponadto końcową krawędź kolumnową miejsca, do którego został przypisany przykładowy element "div#item" stanowi ta linia kolumnowa siatki przykładowego elementu "div#gridbox", która posiada numer "5", ponieważ do wspomnianego elementu "div#item" została dodana właściwość "grid-area" wraz z następującą grupą wartości: "2 /3 /6 /5".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(6, 70px);
grid-template-columns:repeat(6, 70px);
background-color:#7DCDE8;
}
#item {
grid-area:2 /3 /6 /5;
font-size:1.3em;
padding:0.5em;
background-color:red;
}
</style>
</head>
<body>
<div id="gridbox">
<div id="item">div#item</div>
</div>
</body>
</html>
