CSS Grid Layout


Innehållsförteckning

    Visa innehållsförteckning

CSS Grid Layout Module erbjuder ett rutnätsbaserat layoutsystem, med rader och kolumner, vilket gör det lättare att designa webbsidor utan att behöva använda flytningar och positionering:

Header

Menu

Main

Right

Footer


Prova själv →

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


En Grid Layout måste ha ett överordnat element med egenskapen display inställd på grid.

Direkta underordnade element i rutnätsbehållaren blir automatiskt rutnätsobjekt.

1
2
3
4
5
6
7

Prova själv →

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

Rutnätslayout

CSS Grid Layout Module erbjuder ett rutnätsbaserat layoutsystem, med rader och kolumner, vilket gör det lättare att designa webbsidor utan att behöva använda flytningar och positionering.


Webbläsarstöd

Gridegenskaperna stöds i alla moderna webbläsare.

57.0 16.0 52.0 10 44

Grid element

En rutnätslayout består av ett överordnat element, med ett eller flera underordnade element.

Exempel

<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

Prova själv →

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




Visa egendom

Ett HTML-element blir en rutnätsbehållare när dess display-egenskap är satt till grid eller inline-grid.

Exempel

 .grid-container {
  
  display: grid;
}

Prova själv →

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


Exempel

 .grid-container {
  
  display: inline-grid;
}

Prova själv →

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


Alla direkta underordnade rutnätsbehållare blir automatiskt rutnätsobjekt.


Rutnätskolumner

De vertikala linjerna i rutnätsobjekt kallas kolumner.


Rutnätsrader

De horisontella linjerna i rutnätsobjekt kallas rader.


Rutnätsluckor

Mellanrummen mellan varje kolumn/rad kallas luckor.

Du kan justera mellanrummets storlek genom att använda någon av följande egenskaper:

  • column-gap
  • row-gap
  • gap

Exempel

Egenskapen column-gap anger gapet mellan kolumnerna:

 .grid-container {
  
  display: grid;
  column-gap: 50px;
}

Prova själv →

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


Exempel

Egenskapen row-gap anger gapet mellan raderna:

 .grid-container {
  
  display: grid;
  row-gap: 50px;
}

Prova själv →

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


Exempel

Egenskapen gap är en förkortad egenskap för row-gap och column-gap egenskaper:

 .grid-container {
  
  display: grid;
  gap: 50px 100px;
}

Prova själv →

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


Exempel

Egenskapen gap kan också användas för att ställa in både radgap och kolumngap i ett värde:

 .grid-container {
  
  display: grid;
  gap: 50px;
}

Prova själv →

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



Rutnätslinjer

Raderna mellan kolumner kallas kolumnlinjer.

Raderna mellan raderna kallas radlinjer.

Se radnummer när du placerar ett rutnätsobjekt i en rutnätsbehållare:

Exempel

Placera ett rutnätsobjekt på kolumn rad 1 och låt det sluta på kolumn rad 3:

 .item1 {

    grid-column-start: 1;
  grid-column-end: 3;
}

Prova själv →

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


Exempel

Placera ett rutnätsobjekt på rad rad 1 och låt det sluta på rad rad 3:

 .item1 {

    grid-row-start: 1;
  grid-row-end: 3;
}

Prova själv →

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



Alla CSS Grid-egenskaper

column-gap

Anger gapet mellan kolumnerna

gap

En förkortningsegenskap för egenskaperna row-gap och column-gap

grid

En stenografiegenskap för grid-template-raderna, rutnät-mall-kolumner, rutnät-mall-områden, rutnät-auto-rader, grid-auto-columns och egenskaperna grid-auto-flow

grid-area

Anger antingen ett namn för rutnätsobjektet, eller så är den här egenskapen en förkortningsegenskap för grid-row-start, grid-column-start, grid-row -end och grid-column-end egenskaper

grid-auto-columns

Anger en standardkolumnstorlek

grid-auto-flow

Anger hur automatiskt placerade objekt infogas i rutnätet

grid-auto-rows

Anger en standardradstorlek

grid-column

En stenografiegenskap för egenskaperna grid-column-start och grid-column-end

grid-column-end

Anger var rutnätsobjektet ska sluta

grid-column-gap

Anger storleken på gapet mellan kolumner

grid-column-start

Anger var rutnätsobjektet ska börja

grid-gap

En förkortningsegenskap för egenskaperna grid-row-gap och grid-column-gap

grid-row

En förkortningsegenskap för egenskaperna grid-row-start och grid-row-end

grid-row-end

Anger var rutnätsobjektet ska sluta

grid-row-gap

Anger storleken på gapet mellan raderna

grid-row-start

Anger var rutnätsobjektet ska börja

grid-template

En förkortningsegenskap för grid-template-rows, grid-template-columns och rutnätsområden egenskaper

grid-template-areas

Anger hur kolumner och rader ska visas med hjälp av namngivna rutnätsobjekt

grid-template-columns

Anger storleken på kolumnerna och hur många kolumner i en rutnätslayout

grid-template-rows

Anger storleken på raderna i en rutnätslayout

row-gap

Anger gapet mellan rutnätsraderna