CSS rács elrendezés

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

A CSS Grid Layout Module egy rács alapú elrendezési rendszert kínál sorokkal és oszlopokkal, amely megkönnyíti a weboldalak tervezését anélkül, hogy lebegéseket és pozicionálást kellene használnia:

Header

Menu

Main

Right

Footer


Próbálja ki Ön is →

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

A rács-elrendezésnek rendelkeznie kell egy szülőelemmel, amelynek display tulajdonsága grid.

A rácstároló közvetlen gyermekelemei automatikusan rácselemekké válnak.

1
2
3
4
5
6
7

Próbálja ki Ön is →

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

Rácsszerkezet

A CSS Grid Layout Module rács alapú elrendezési rendszert kínál sorokkal és oszlopokkal, ami megkönnyíti a weboldalak tervezését anélkül, hogy lebegéseket és pozicionálást kellene használnia.

Böngésző támogatás

A rács tulajdonságait minden modern böngésző támogatja.

57.0 16.0 52.0 10 44

Rács elemek

A rácselrendezés egy szülőelemből áll, egy vagy több gyermekelemmel.

Példa

<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

Próbálja ki Ön is →

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

Megjelenítési tulajdonság

Egy HTML-elem akkor válik rácstárolóvá, ha megjeleníti tulajdonságát be van állítva rács vagy inline-grid.

Példa

 .grid-container {
  
  display: grid;
}

Próbálja ki Ön is →

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

Példa

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

Próbálja ki Ön is →

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

A rácstároló minden közvetlen gyermeke automatikusan rácselemekké válik.

Rács oszlopok

A rácselemek függőleges vonalait oszlopoknak nevezzük.

Rács sorok

A rácselemek vízszintes vonalait soroknak nevezzük.

Rács hézagok

Az egyes oszlopok/sorok közötti szóközöket réseknek nevezzük.

A hézag méretét a következő tulajdonságok egyikével állíthatja be:

  • column-gap
  • row-gap
  • gap

Példa

A column-gap tulajdonság beállítja az oszlopok közötti rést:

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

Próbálja ki Ön is →

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

Példa

A row-gap tulajdonság beállítja a sorok közötti hézagot:

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

Próbálja ki Ön is →

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

Példa

A gap tulajdonság egy rövidített tulajdonság a row-gap és a column-gap tulajdonságok:

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

Próbálja ki Ön is →

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

Példa

A gap tulajdonság is használható a sorköz és a oszlophézag egy értékben:

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

Próbálja ki Ön is →

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

Rácsvonalak

Az oszlopok közötti vonalakat oszlopsoroknak nevezzük.

A sorok közötti vonalakat sorvonalaknak nevezzük.

Ha rácselemet helyez egy rácstárolóba, vegye figyelembe a sorszámokat:

Példa

Helyezzen egy rácselemet az 1. oszlopsorba, és hagyja, hogy a 3. oszlopsoron végződjön:

 .item1 {

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

Próbálja ki Ön is →

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

Példa

Helyezzen egy rácselemet az 1. sor sorába, és hagyja, hogy a 3. soron érjen véget:

 .item1 {

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

Próbálja ki Ön is →

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

Minden CSS-rács tulajdonság

column-gap

Megadja az oszlopok közötti távolságot

gap

Egy rövidített tulajdonság a row-gap és az column-gap tulajdonságokhoz

grid

A grid-template-rows gyorsírási tulajdonsága, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns és a grid-auto-flow tulajdonságok

grid-area

Vagy megadja a rácselem nevét, vagy ez a tulajdonság a grid-row-start, grid-column-start, grid-row rövidített tulajdonsága. -end és grid-column-end tulajdonságok

grid-auto-columns

Megadja az alapértelmezett oszlopméretet

grid-auto-flow

Meghatározza, hogy az automatikusan elhelyezett elemek hogyan legyenek beszúrva a rácsba

grid-auto-rows

Megadja az alapértelmezett sorméretet

grid-column

Egy rövidített tulajdonság a grid-column-start és a grid-column-end tulajdonságokhoz

grid-column-end

Meghatározza, hogy hol kell befejezni a rácselemet

grid-column-gap

Megadja az oszlopok közötti hézag méretét

grid-column-start

Meghatározza, hogy hol indítsa el a rácselemet

grid-gap

A grid-row-gap és grid-column-gap tulajdonságok rövidített tulajdonsága

grid-row

Egy rövidített tulajdonság a grid-row-start és a grid-row-end tulajdonságokhoz

grid-row-end

Meghatározza, hogy hol kell befejezni a rácselemet

grid-row-gap

Megadja a sorok közötti hézag méretét

grid-row-start

Meghatározza, hogy hol indítsa el a rácselemet

grid-template

Egy rövidített tulajdonság a grid-template-rows, grid-template-columns számára és grid-areas tulajdonságok

grid-template-areas

Meghatározza, hogyan jelenítse meg az oszlopokat és a sorokat elnevezett rácselemek használatával

grid-template-columns

Megadja az oszlopok méretét, és hány oszlopot tartalmaz egy rácselrendezés

grid-template-rows

Meghatározza a sorok méretét egy rácselrendezésben

row-gap

Meghatározza a rácssorok közötti rést