CSS Grid Layout Module tarjoaa ruudukkopohjaisen asettelujärjestelmän, jossa on rivejä ja sarakkeita, mikä helpottaa verkkosivujen suunnittelua ilman kellukkeita ja sijoittelua:
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
Ruudukkoasettelussa on oltava yläelementti, jonka display-ominaisuuden arvo on grid.
Ruudukkosäiliön suorista alielementeistä tulee automaattisesti ruudukkokohteita.
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-row: 1;
grid-column: 1;
}
.item2 {
grid-row: 1;
grid-column: 2;
}
.item3 {
grid-row: 1;
grid-column: 3;
}
.item4 {
grid-row: 2;
grid-column: 1;
}
.item5 {
grid-row: 2;
grid-column: 2;
}
.item6 {
grid-row: 2;
grid-column: 3;
}
.item7 {
grid-row: 3;
grid-column: 1 / span 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item item4">4</div>
<div class="grid-item item5">5</div>
<div class="grid-item item6">6</div>
<div class="grid-item item7">7</div>
</div>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em>.</p>
<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>
</body>
</html>
CSS Grid Layout Module tarjoaa ruudukkopohjaisen asettelujärjestelmän, jossa on rivejä ja sarakkeita, mikä helpottaa verkkosivujen suunnittelua käyttämättä kellukkeita ja paikannusta.
Grid-ominaisuuksia tuetaan kaikissa nykyaikaisissa selaimissa.
57.0 | 16.0 | 52.0 | 10 | 44 |
Ruudukkoasettelu koostuu pääelementistä, jossa on yksi tai useampi alaelementti.
<div
class="grid-container">
<div class="grid-item">1</div>
<div
class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div
class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div
class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
HTML-elementistä tulee ruudukkosäilö, kun sen näyttö
-ominaisuus on asetettu ruudukko
tai inline-grid
.
.grid-container {
display: grid;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>display: grid</h1>
<p>Use display: grid; to make a block-level grid container:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
.grid-container {
display: inline-grid;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>display: inline-grid</h1>
<p>Use display: inline-grid; to make an inline grid container:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Kaikista ruudukkosäilön suorista lapsista tulee automaattisesti ruudukkokohteita.
Ruudukkokohteiden pystysuorat viivat kutsutaan sarakkeiksi.
Ruudukkokohteiden vaakasuoria viivoja kutsutaan riveiksi.
Kunkin sarakkeen/rivin välisiä välejä kutsutaan rakoiksi.
Voit säätää raon kokoa käyttämällä jotakin seuraavista ominaisuuksista:
column-gap
row-gap
gap
Ominaisuus column-gap
määrittää sarakkeiden välisen raon:
.grid-container {
display: grid;
column-gap: 50px;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
column-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The column-gap Property</h1>
<p>Use the <em>column-gap</em> property to adjust the space between the columns:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Ominaisuus row-gap
määrittää rivien välisen raon:
.grid-container {
display: grid;
row-gap: 50px;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
row-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The row-gap Property</h1>
<p>Use the <em>row-gap</em> property to adjust the space between the rows:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Ominaisuus gap
on lyhennelmä ominaisuus riviväli
ja column-gap
-ominaisuudet:
.grid-container {
display: grid;
gap: 50px 100px;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 50px 100px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The gap Property</h1>
<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Ominaisuutta gap
voidaan käyttää myös rivivälin ja sarakeväli yhdessä arvossa:
.grid-container {
display: grid;
gap: 50px;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The gap Property:</h1>
<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Sarakkeiden välisiä viivoja kutsutaan sarakeriveiksi.
Rivien välisiä viivoja kutsutaan riviviivoiksi.
Katso rivinumerot, kun asetat ruudukkokohteen ruudukkosäiliöön:
Aseta ruudukon kohde sarakeriville 1 ja anna sen päättyä sarakeriville 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
<p>You can refer to line numbers when placing grid items.</p>
</body>
</html>
Aseta ruudukkokohde riviriville 1 ja anna sen päättyä riviriville 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
<p>You can refer to line numbers when placing grid items.</p>
</body>
</html>
Määrittää sarakkeiden välisen raon
Lyhytmuotoinen ominaisuus row-gap- ja column-gap-ominaisuuksille
Lyhytmuotoinen ominaisuus grid-template-rowsille, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns ja grid-auto-flow-ominaisuudet
Joko määrittää nimen ruudukkokohdalle tai tämä ominaisuus on lyhennetty ominaisuus grid-row-start, grid-column-start, grid-row -end- ja grid-column-end-ominaisuudet
Määrittää sarakkeen oletuskoon
Määrittää, kuinka automaattisesti sijoitetut kohteet lisätään ruudukkoon
Määrittää rivin oletuskoon
Lyhytmuotoinen ominaisuus grid-column-start- ja grid-column-end-ominaisuuksille
Määrittää, mihin ruudukon kohde lopetetaan
Määrittää sarakkeiden välisen raon koon
Määrittää, mistä ruudukkokohde aloitetaan
Lyhytmuotoinen ominaisuus grid-row-gap- ja grid-column-gap-ominaisuuksille
Lyhytmuotoinen ominaisuus grid-row-start- ja grid-row-end-ominaisuuksille
Määrittää, mihin ruudukon kohde lopetetaan
Määrittää rivien välisen raon koon
Määrittää, mistä ruudukkokohde aloitetaan
Lyhytmuotoinen ominaisuus grid-template-rows- ja grid-template-columns ja grid-areas-ominaisuudet
Määrittää, kuinka sarakkeet ja rivit näytetään nimettyjen ruudukkokohteiden avulla
Määrittää sarakkeiden koon ja kuinka monta saraketta ruudukkoasettelussa
Määrittää ruudukkoasettelun rivien koon
Määrittää ruudukon rivien välisen raon