Za pomocą właściwości grid-gap
oraz z góry zdefiniowanej grupy wartości możemy określić rozmiar dodatkowego odstępu pomiędzy poszczególnymi wierszami oraz kolumnami siatki interesującego nas elementu HTML tworzącego układ siatki.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
grid-gap:15px 30px;
}
/* REGUŁA - 2 */
div {
grid-row-gap:15px;
grid-column-gap:30px;
}
- row
-
Składnik row
jest wymaganym składnikiem grupy wartości właściwości grid-gap
. Składnik row
określa wartość właściwości grid-row-gap, czyli rozmiar dodatkowego odstępu pomiędzy poszczególnymi wierszami siatki interesującego nas elementu HTML tworzącego układ siatki.
- calumn
-
Składnik calumn
nie jest wymaganym składnikiem grupy wartości właściwości grid-gap
. Składnik calumn
określa wartość właściwości grid-column-gap, czyli rozmiar dodatkowego odstępu pomiędzy poszczególnymi kolumnami siatki interesującego nas elementu HTML tworzącego układ siatki.
grid-gap:30px 15px;
Rozmiar dodatkowego odstępu pomiędzy poszczególnymi wierszami siatki przykładowego elementu "div#gridbox" wynosi 30 pikseli, natomiast rozmiar dodatkowego odstępu pomiędzy poszczególnymi kolumnami siatki przykładowego elementu "div#gridbox" wynosi 15 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-gap" wraz z następującą grupą wartości: "30px 15px".
<!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);
grid-gap:30px 15px;
background-color:#7DCDE8;
}
#item {
grid-row-start:2;
grid-row-end:6;
grid-column-start:2;
grid-column-end:6;
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>