Za pomocą właściwości grid-auto-columns oraz wybranej wartości należącej do składnika size pierwszego wzorca wartości właściwości grid-template-columns (z wyłączeniem funkcji repeat()) możemy określić domyślny rozmiar szerokości wszystkich kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.
grid-auto-columns:75px;
Domyślny rozmiar szerokości wszystkich kolumn budujących siatkę przykładowego elementu "div#gridbox" wynosi 75 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-auto-columns" wraz z wartością "75px".
<!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-columns możemy sprawić, że kolejne poszczególne kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki będą posiadały różny domyślny rozmiar szerokości.
Podana przez nas kombinacja wartości właściwości "grid-auto-columns" nie może zawierać wartości globalnych.
grid-auto-columns:100px 50px;
Domyślny rozmiar szerokości wszystkich nieparzystych kolumn budujących siatkę przykładowego elementu "div#gridbox" wynosi 100 pikseli, natomiast domyślny rozmiar szerokości wszystkich parzystych kolumn 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-columns" wraz z następującą kombinacją wartości: "100px 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:70px;
grid-auto-columns:100px 50px;
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>
