Articles
Introductie tot CSS
CSS-eigenschappen gerelateerd aan grid-layout

CSS-eigenschappen gerelateerd aan grid-layout

Dit artikel legt CSS-eigenschappen uit die betrekking hebben op grid-layout.

Je kunt leren hoe je grid en inline grid kunt beschrijven.

YouTube Video

HTML voor Voorbeeldweergave

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

Grid-layout

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

Een grid is een layout-systeem voor het uitlijnen van elementen in tweedimensionale rijen en kolommen. Met een grid kun je eenvoudig en flexibel complexe layouts maken die moeilijk waren met traditionele float- of position-methoden. Flexbox blinkt uit in eendimensionale layouts, maar grid is geschikt voor tweedimensionale layouts.

  • De grid-box-klasse past een grid-layout toe door grid op te geven in de display-eigenschap. Dit element wordt een gridcontainer genoemd.
  • De eigenschap grid-template-columns specificeert de breedte van gridkolommen. In dit voorbeeld is de eerste kolom 100px, de tweede kolom 200px, en de derde kolom neemt de resterende ruimte in (auto).
  • De eigenschap grid-template-rows specificeert de hoogte van gridrijen. De eerste rij is 100px, de tweede rij is automatisch (auto), en de derde rij is 50px hoog.
  • De eigenschap gap stelt de ruimte tussen grid-items in. 10px ruimte toevoegen tussen kolommen en rijen.

Basis terminologie

  1. Een gridcontainer is een element met de display-eigenschap ingesteld op grid, en de kinderen worden grid-items.
  2. Grid-items zijn de kindelementen die direct onder een gridcontainer worden geplaatst.

Belangrijkste grid-eigenschappen

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • De eigenschappen grid-template-columns en grid-template-rows definiëren de grootte van elke kolom en rij.
  • Eenheden zoals px en %, evenals fr (fractie) om een verhouding van de resterende ruimte te specificeren, kunnen worden gebruikt.
    • In dit voorbeeld zijn er drie kolommen en de tweede kolom is twee keer zo breed als de andere.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6.item {
 7  grid-column: 2 / 4;
 8  grid-row: 1 / 3;
 9}
10/* Grid line number (3 rows & 4 columns)
11  1   2   3   4   5
121 +---+---+---+---+
13  |   | o | o |   |
142 +---+---+---+---+
15  |   | o | o |   |
163 +---+---+---+---+
17  |   |   |   |   |
184 +---+---+---+---+
19*/

  • grid-column en grid-row zijn eigenschappen die worden gebruikt om de positie van rasteritems te specificeren. In plaats van celnummers is de nummering gebaseerd op rasterlijnen.

    • In dit voorbeeld is het item geplaatst van de 2e tot de 4e verticale rasterlijn en van de 1e tot de 3e horizontale rasterlijn. Met andere woorden, het beslaat de cellen in kolommen 2 en 3, en rijen 1 en 2.

  • Rasterlijnen verwijzen naar de lijnen die rijen en kolommen verdelen binnen een rastercontainer. Rasterlijnen worden automatisch genummerd vanaf 1 en worden gebruikt als grenzen voor rijen en kolommen.

    • Een raster met 4 kolommen heeft bijvoorbeeld 5 verticale rasterlijnen genummerd van 1 tot 5, en elke cel bevindt zich in het gebied tussen deze lijnen.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows en grid-auto-columns zijn eigenschappen die de grootte bepalen van rijen en kolommen die automatisch worden gegenereerd wanneer gridlijnen of kolommen niet expliciet worden gedefinieerd.
    • In dit voorbeeld zijn 2 rijen en 2 kolommen expliciet gedefinieerd, maar als er meer elementen worden toegevoegd, worden nieuwe rijen of kolommen automatisch gegenereerd volgens grid-auto-rows en grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Lijn grid-items horizontaal uit (justify-items) en verticaal (align-items).
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area is een eigenschap waarmee je de rijen- en kolombereiken tegelijkertijd kunt specificeren om een rasteritem te positioneren. Je specificeert de positie met behulp van de rasterlijnnummers, niet de celnummers.
    • In dit voorbeeld is het item geplaatst van de 1e tot de 3e horizontale rasterlijn en van de 2e tot de 4e verticale rasterlijn. Met andere woorden, het beslaat het bereik van cellen in rijen 1 en 2, en kolommen 2 en 3.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap voegt ruimte toe tussen kolommen en rijen. Je kunt de ruimte tussen kolommen en rijen ook afzonderlijk specificeren met column-gap en row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow is een eigenschap die de richting bepaalt waarin items worden geplaatst, ofwel per rij of per kolom.

Voorbeeld van complexe lay-outs. 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10.grid-header {
11    grid-column: 1 / 4;
12    background-color: lightblue;
13}
14.grid-sidebar {
15    grid-column: 1 / 2;
16    grid-row: 2 / 3;
17    height: 100%;
18    background-color: lightslategray;
19    color: white;
20}
21.grid-content {
22    grid-column: 2 / 3;
23    grid-row: 2 / 3;
24    background-color: lightskyblue;
25}
26.grid-content p {
27    margin: 0;
28    padding: 0;
29    height: 260px;
30}
31.grid-ads {
32    grid-column: 3 / 4;
33    grid-row: 2 / 3;
34    height: 100%;
35    background-color: lightsteelblue;
36}
37.grid-footer {
38    grid-column: 1 / 4;
39    background-color: lightgray;
40}

Op deze manier kun je met grid een volledige webpagina-indeling maken met eenvoudige code.

  • In dit voorbeeld zijn er drie kolommen (zijbalk, hoofdinhoud en advertentie) en drie rijen (kop, inhoud en voettekst).
  • De header en footer beslaan de volledige breedte van de pagina, met de inhoud in het midden, en de zijbalk en advertentie aan beide zijden.

Voordelen van grids.

De voordelen van grids omvatten de volgende punten:.

  • Eenvoudige tweedimensionale lay-out: Het beheren van de lay-out in zowel rijen als kolommen maakt het mogelijk om zelfs complexe lay-outs te realiseren met minder code.
  • Compatibel met responsief ontwerp: Het grid-systeem maakt het eenvoudig om responsieve ontwerpen te maken die zich aanpassen aan verschillende schermformaten.

gap eigenschap. 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

De gap eigenschap wordt gebruikt in grid- en flexbox-lay-outs om de ruimte (gaps) tussen elementen in te stellen. Met behulp van deze eigenschap kun je eenvoudig ruimte tussen kindelementen plaatsen.

  • In de klasse gap-grid-container wordt een verticale afstand van 30px en een horizontale afstand van 10px tussen elk element ingesteld. Omdat er een raster met 3 kolommen is gemaakt met grid-template-columns, worden de ruimtes verticaal en horizontaal tussen elk element toegepast. In de klasse gap-flex-container wordt een afstand van 50px toegepast tussen de drie items in de flexbox.

Basis Syntax 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • De row-gap specificeert de afstand tussen rijen. Dit is de verticale afstand in raster- of flex-indelingen.
  • De column-gap specificeert de afstand tussen kolommen. Dit is de horizontale afstand.

Als er geen twee waarden zijn opgegeven, wordt één waarde toegepast op zowel row-gap als column-gap.

Voordelen van de gap-eigenschap

De voordelen van de gap-eigenschap omvatten het volgende:.

  • Eenvoudige instellingen voor afstanden: De code om afstanden tussen kindelementen in te stellen wordt eenvoudiger, waardoor het niet meer nodig is om extra marges of opvulling tussen elementen in te stellen.
  • Flexibele aanpassing: Het ondersteunt eenvoudig responsief ontwerp, waardoor flexibele ontwerpaanpassingen mogelijk zijn.

grid-template-areas-eigenschap 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12.grid-template-areas-container div {
13    width: 100%;
14    height: 100%;
15}
16.grid-template-areas-header {
17    grid-area: header; /* Placed in the "header" area */
18    background-color: lightblue;
19}
20.grid-template-areas-sidebar {
21    grid-area: sidebar; /* Placed in the "sidebar" area */
22    background-color: lightslategray;
23}
24.grid-template-areas-content {
25    grid-area: content; /* Placed in the "content" area */
26    background-color: lightskyblue;
27}
28.grid-template-areas-footer {
29    grid-area: footer; /* Placed in the "footer" area */
30    background-color: lightsteelblue;
31}

De eigenschap grid-template-areas biedt een manier om gebieden binnen een rastercontainer een naam te geven en die namen te gebruiken om rasterelementen gemakkelijk te positioneren. Met deze eigenschap kunnen visueel intuïtieve lay-outdefinities worden gemaakt.

Elementen die zijn geplaatst in benoemde gebieden die zijn gespecificeerd met de eigenschap grid-template-areas, moeten dezelfde naam toegewezen krijgen met de eigenschap grid-area. Zelfs als elementen meerdere cellen beslaan, worden ze automatisch correct gepositioneerd.

In dit voorbeeld wordt het raster als volgt gemaakt:.

  • In de eerste rij wordt "header" over twee kolommen geplaatst.
  • "Sidebar" wordt links geplaatst en "content" rechts in de tweede rij.
  • "Footer" wordt over twee kolommen geplaatst in de derde rij.

Basisgebruik 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

In de eigenschap grid-template-areas wordt de naam van het gebied voor elke rij gespecificeerd. Door elementen in gebieden met toegewezen namen te plaatsen, kun je eenvoudig lay-outs creëren. - In dit voorbeeld wordt een raster met 2 rijen en 3 kolommen gemaakt, en elke cel krijgt een naam zoals area1, area2, enzovoort.

Lege cellen definiëren met behulp van . 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

Als je lege cellen in je lay-out wilt hebben, kun je lege cellen weergeven met een . (punt). - Zoals in dit voorbeeld, door een . te specificeren tussen sidebar en content, wordt de tweede kolom leeg.

Voordelen van de eigenschap grid-template-areas

De voordelen van de eigenschap grid-template-areas omvatten de volgende punten.

  • Visuele lay-out: Hiermee kun je de lay-out visueel uitdrukken, wat het ontwerp gemakkelijker te begrijpen maakt.
  • Eenvoudige verplaatsing van elementen: Je kunt de lay-out van elementen eenvoudig aanpassen door de gebiedsdefinities in CSS te wijzigen zonder de HTML aan te passen.

Notities

Bij het gebruik van de eigenschap grid-template-areas is het belangrijk om aandacht te besteden aan de volgende punten.

  • Het aantal namen in elke rij moet overeenkomen met het aantal gedefinieerde kolommen.
  • Als u dezelfde naam aan meerdere cellen toewijst, worden die cellen samengevoegd.
  • Als u dezelfde naam toewijst aan verschillende rijen en kolommen, moet het gebied een rechthoek vormen.

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid is een van de waarden voor de eigenschap display in CSS. Het toepassen van deze eigenschap zorgt ervoor dat het element zich gedraagt als een inline-niveau container, die intern een raster-indelingscontext creëert. In tegenstelling tot display: grid gedraagt het zich als een inline-element in de documentstroom.

Gebruiksscenario's van inline-grid

inline-grid is niet zo gebruikelijk als grid, maar kan effectief worden gebruikt in specifieke scenario's.

  • Raster binnen inline-context: Nuttig wanneer je een raster naast tekstinhoud of andere inline-elementen wilt plaatsen. Bijvoorbeeld, het is handig wanneer een rasterstructuur nodig is voor knoppen, badges, labels, etc., maar je wilt inline weergeven zonder de tekststroom te verstoren.

  • Lay-outbeheer binnen inline-elementen: Zelfs wanneer complexe lay-outs nodig zijn binnen inline-elementen zoals links, knoppen of spans, kan inline-grid de interne structuur beheren met een rasterlay-out terwijl blokweergave wordt vermeden.

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

In dit geval toont de knop pictogrammen en tekst in een raster, terwijl het inline blijft in de documentstroom.

  • Responsieve inline-componenten: inline-grid kan worden gebruikt voor kleine componenten die deel uitmaken van inline-inhoud en een rasterlay-out vereisen. Bijvoorbeeld, het is geschikt voor inline-formulieren, badges, productlabels, etc., waar je de lay-out wilt aanpassen met een raster terwijl je het inline houdt.

Uitlijning en grootte van inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Net als andere inline-elementen respecteert inline-grid de verticale uitlijning ten opzichte van de omliggende inhoud. Je kunt de uitlijning van het raster regelen met behulp van de eigenschap vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • Wat betreft de grootte neemt een inline-grid-element alleen de breedte in die nodig is voor de inhoud van het raster. Indien nodig kun je expliciet de breedte, hoogte en minimale/maximale afmetingen instellen.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Het is ook mogelijk dat de lay-out van het raster zelf de grootte van de inline-grid-container bepaalt, en deze neiging is sterker bij het gebruik van flexibele eenheden zoals fr, auto en procenten.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Flexbox-gerelateerde CSS-eigenschappenCSS-eigenschappen gerelateerd aan kolomlay-out