CSS-ruudukkoasettelu


Sisällysluettelo

    Näytä sisällysluettelo

CSS Grid Layout Module tarjoaa ruudukkopohjaisen asettelujärjestelmän, jossa on rivejä ja sarakkeita, mikä helpottaa verkkosivujen suunnittelua ilman kellukkeita ja sijoittelua:

Header

Menu

Main

Right

Footer


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.

1
2
3
4
5
6
7

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>

Ruudukkoasettelu

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.


Selaimen tuki

Grid-ominaisuuksia tuetaan kaikissa nykyaikaisissa selaimissa.

57.0 16.0 52.0 10 44

Ruudukkoelementit

Ruudukkoasettelu koostuu pääelementistä, jossa on yksi tai useampi alaelementti.

Esimerkki

<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>

1

2

3

4

5

6

7

8

9

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>




Näytön ominaisuus

HTML-elementistä tulee ruudukkosäilö, kun sen näyttö-ominaisuus on asetettu ruudukko tai inline-grid.

Esimerkki

 .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>


Esimerkki

 .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.


Ruudukon sarakkeet

Ruudukkokohteiden pystysuorat viivat kutsutaan sarakkeiksi.


Ruudukkorivit

Ruudukkokohteiden vaakasuoria viivoja kutsutaan riveiksi.


Verkon aukot

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

Esimerkki

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>


Esimerkki

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>


Esimerkki

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>


Esimerkki

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>



Ruudukkoviivat

Sarakkeiden välisiä viivoja kutsutaan sarakeriveiksi.

Rivien välisiä viivoja kutsutaan riviviivoiksi.

Katso rivinumerot, kun asetat ruudukkokohteen ruudukkosäiliöön:

Esimerkki

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>


Esimerkki

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>



Kaikki CSS-ruudukon ominaisuudet

column-gap

Määrittää sarakkeiden välisen raon

gap

Lyhytmuotoinen ominaisuus row-gap- ja column-gap-ominaisuuksille

grid

Lyhytmuotoinen ominaisuus grid-template-rowsille, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns ja grid-auto-flow-ominaisuudet

grid-area

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

grid-auto-columns

Määrittää sarakkeen oletuskoon

grid-auto-flow

Määrittää, kuinka automaattisesti sijoitetut kohteet lisätään ruudukkoon

grid-auto-rows

Määrittää rivin oletuskoon

grid-column

Lyhytmuotoinen ominaisuus grid-column-start- ja grid-column-end-ominaisuuksille

grid-column-end

Määrittää, mihin ruudukon kohde lopetetaan

grid-column-gap

Määrittää sarakkeiden välisen raon koon

grid-column-start

Määrittää, mistä ruudukkokohde aloitetaan

grid-gap

Lyhytmuotoinen ominaisuus grid-row-gap- ja grid-column-gap-ominaisuuksille

grid-row

Lyhytmuotoinen ominaisuus grid-row-start- ja grid-row-end-ominaisuuksille

grid-row-end

Määrittää, mihin ruudukon kohde lopetetaan

grid-row-gap

Määrittää rivien välisen raon koon

grid-row-start

Määrittää, mistä ruudukkokohde aloitetaan

grid-template

Lyhytmuotoinen ominaisuus grid-template-rows- ja grid-template-columns ja grid-areas-ominaisuudet

grid-template-areas

Määrittää, kuinka sarakkeet ja rivit näytetään nimettyjen ruudukkokohteiden avulla

grid-template-columns

Määrittää sarakkeiden koon ja kuinka monta saraketta ruudukkoasettelussa

grid-template-rows

Määrittää ruudukkoasettelun rivien koon

row-gap

Määrittää ruudukon rivien välisen raon