Za pomocą właściwości grid-auto-rows oraz wybranej wartości należącej do składnika size pierwszego wzorca wartości właściwości grid-template-rows (z wyłączeniem funkcji repeat()) możemy określić domyślny rozmiar wysokości wszystkich wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.
grid-auto-rows:50px;
Domyślny rozmiar wysokości wszystkich wierszy budujących siatkę przykładowego elementu "div#gridbox" wynosi 50 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-auto-rows" wraz z wartością "50px".
<!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-auto-rows:50px;
grid-auto-columns:75px;
background-color:#7DCDE8;
}
#gridbox > div {
padding:0.5em;
font-size:1.3em;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:3;
grid-column-end:7;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:3;
grid-row-end:7;
grid-column-start:1;
grid-column-end:3;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:4;
grid-row-end:7;
grid-column-start:4;
grid-column-end:7;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div>div-1</div>
<div>div-2</div>
<div>div-3</div>
</div>
</body>
</html>
Za pomocą kombinacji kilku (oddzielonych od siebie znakiem spacji) wartości należących do właściwości grid-auto-rows możemy sprawić, że kolejne poszczególne wiersze budujące siatkę interesującego nas elementu HTML tworzącego układ siatki będą posiadały różny domyślny rozmiar wysokości.
Podana przez nas kombinacja wartości właściwości "grid-auto-rows" nie może zawierać wartości globalnych.
grid-auto-rows:80px 40px;
Domyślny rozmiar wysokości wszystkich nieparzystych wierszy budujących siatkę przykładowego elementu "div#gridbox" wynosi 80 pikseli, natomiast domyślny rozmiar wysokości wszystkich parzystych wierszy budujących siatkę przykładowego elementu "div#gridbox" wynosi 40 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-auto-rows" wraz z następującą kombinacją wartości: "80px 40px".
<!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-auto-rows:80px 40px;
grid-auto-columns:75px;
background-color:#7DCDE8;
}
#gridbox > div {
padding:0.5em;
font-size:1.3em;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:3;
grid-column-end:7;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:3;
grid-row-end:7;
grid-column-start:1;
grid-column-end:3;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:4;
grid-row-end:7;
grid-column-start:4;
grid-column-end:7;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div>div-1</div>
<div>div-2</div>
<div>div-3</div>
</div>
</body>
</html>
