Articles
Introduktion till CSS
CSS-egenskaper relaterade till gridlayout

CSS-egenskaper relaterade till gridlayout

Den här artikeln förklarar CSS-egenskaper relaterade till gridlayout.

Du kan lära dig hur man beskriver grid och inline grid.

YouTube Video

HTML för förhandsgranskning

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>

Gridlayout

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}

Ett grid är ett layoutsystem för att justera element i tvådimensionella rader och kolumner. Med ett grid kan du enkelt och flexibelt skapa komplexa layouter som var svåra med traditionella float- eller position-metoder. Medan flexbox är utmärkt för endimensionella layouter, är grid lämpligt för tvådimensionella layouter.

  • Klassen grid-box tillämpar en gridlayout genom att ange grid i display-egenskapen. Det här elementet kallas för en gridcontainer.
  • Egenskapen grid-template-columns anger bredden på gridens kolumner. I detta exempel är den första kolumnen 100px, den andra kolumnen 200px, och den tredje kolumnen tar upp det återstående utrymmet (auto).
  • Egenskapen grid-template-rows anger höjden på gridens rader. Den första raden är 100px, den andra raden är automatisk (auto), och den tredje raden är 50px hög.
  • Egenskapen gap ställer in avståndet mellan gridelement. Lägger till 10px avstånd mellan kolumner och rader.

Grundläggande terminologi

  1. En gridcontainer är ett element där display-egenskapen är inställd på grid, och dess barn blir gridelement.
  2. Gridelement är de barnelement som placeras direkt under en gridcontainer.

Huvudsakliga gridegenskaper

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • Egenskaperna grid-template-columns och grid-template-rows definierar storleken på varje kolumn och rad.
  • Enheter såsom px och %, samt fr (fraktion) för att ange en andel av det återstående utrymmet, kan användas.
    • I det här exemplet finns det tre kolumner, där den andra kolumnen är dubbelt så bred som de andra.
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
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column och grid-row anger vilken kolumn eller rad rutnätsobjektet ska placeras i.
    • I det här exemplet sträcker sig objektet från den andra kolumnen till den fjärde kolumnen och från den första raden till den tredje raden.
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 och grid-auto-columns är egenskaper som styr storleken på rader och kolumner som automatiskt genereras när linjer eller kolumner för rutnätslayout inte uttryckligen anges.
    • I det här exemplet anges 2 rader och 2 kolumner uttryckligen, men om fler element läggs till kommer nya rader eller kolumner att genereras automatiskt enligt grid-auto-rows och grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Justera rutnätsobjekt horisontellt (justify-items) och vertikalt (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 anger omedelbart vilket område i rutnätsbehållaren som rutnätsobjektet ska placeras i.
    • I det här exemplet innebär det att uppta från den första raden till den tredje raden och från den andra kolumnen till den fjärde kolumnen.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap lägger till utrymme mellan kolumner och rader. Du kan också specificera avståndet mellan kolumner och rader individuellt med hjälp av column-gap och row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow är en egenskap som anger riktningen i vilken objekt placeras, antingen i rader eller i kolumner.

Exempel på komplexa layouter. 

 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
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

På detta sätt möjliggör grid att skapa en hel webbsideslayout med enkel kod.

  • I detta exempel finns det tre kolumner (sidofält, huvudinnehåll och annons) och tre rader (header, innehåll och footer).
  • Huvudet och sidfoten upptar hela bredden på sidan, med innehållet i mitten och sidofältet och annonsen på båda sidor.

Fördelar med rutnät.

Fördelarna med rutnät inkluderar följande punkter:.

  • Enkel tvådimensionell layout: Att hantera layouten i både rader och kolumner möjliggör även komplexa layouter med mindre kod.
  • Kompatibel med responsiv design: Rutnätssystemet gör det enkelt att skapa responsiva designer som anpassar sig till olika skärmstorlekar.

gap-egenskap. 

 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}

gap-egenskapen används i rutnätslayouter och flexboxlayouter för att ställa in mellanrummen (luckorna) mellan element. Med hjälp av denna egenskap kan du enkelt lägga till mellanrum mellan barnobjekt.

  • I klassen gap-grid-container sätts ett gap på 30px vertikalt och 10px horisontellt mellan varje element. Eftersom ett rutnät med tre kolumner skapas med grid-template-columns, tillämpas gap både vertikalt och horisontellt mellan varje element. I klassen gap-flex-container tillämpas ett gap på 50px mellan de tre objekten i flexboxen.

Grundläggande syntax 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap anger gapet mellan rader. Detta är det vertikala avståndet i rutnät- eller flexlayouter.
  • column-gap anger gapet mellan kolumner. Detta är det horisontella avståndet.

Om två värden inte specificeras tillämpas ett värde på både row-gap och column-gap.

Fördelar med egenskapen gap

Följande är fördelar med egenskapen gap:.

  • Enkel gapsättning: Koden för att sätta gap mellan barnobjekt blir enklare, vilket eliminerar behovet av att sätta extra marginaler eller utfyllnad mellan element.
  • Flexibel anpassning: Stödjer enkelt responsiv design och möjliggör flexibla designjusteringar.

Egenskapen grid-template-areas 

 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
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

Egenskapen grid-template-areas ger ett sätt att namnge områden inom en rutnätsbehållare och använda dessa namn för att enkelt placera rutnätsobjekt. Genom att använda denna egenskap möjliggörs visuellt intuitiva layoutdefinitioner.

Element som placeras i namngivna områden som specificeras med egenskapen grid-template-areas bör ha samma namn tilldelat med egenskapen grid-area. Även om element sträcker sig över flera celler, placeras de automatiskt korrekt.

I det här exemplet skapas rutnätet enligt följande:.

  • I den första raden placeras "header" över två kolumner.
  • "Sidebar" placeras till vänster och "content" till höger i den andra raden.
  • "Footer" placeras över två kolumner i den tredje raden.

Grundläggande användning 

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

I egenskapen grid-template-areas specificeras namnet på området för varje rad. Genom att placera element i områden med tilldelade namn kan du enkelt skapa layouter. - I detta exempel skapas ett rutnät med 2 rader och 3 kolumner, och varje cell namnges som area1, area2 etc.

Definiera tomma celler med . 

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

Om du vill ha tomma celler i din layout kan du representera dem med en . (punkt). - Som i detta exempel blir den andra kolumnen tom genom att ange en . mellan sidebar och content.

Fördelar med egenskapen grid-template-areas

Fördelarna med egenskapen grid-template-areas inkluderar följande punkter:.

  • Visuell layout: Det låter dig visuellt uttrycka layouten, vilket gör det enklare att förstå designen.
  • Enkel att flytta element: Du kan enkelt justera layouten genom att ändra områdesdefinitionerna i CSS utan att ändra HTML.

Anteckningar

När du använder egenskapen grid-template-areas är det viktigt att tänka på följande punkter:.

  • Antalet namn i varje rad måste matcha antalet definierade kolumner.
  • Att tilldela samma namn till flera celler kommer att slå ihop dem, men när de tilldelas olika rader eller kolumner måste området vara kvadratiskt.

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 är ett av värdena för egenskapen display i CSS. Genom att tillämpa denna egenskap beter sig elementet som en inline-nivåbehållare och skapar en intern grid-formateringskontext. Till skillnad från display: grid beter det sig som ett inline-element i dokumentflödet.

Användningsområden för inline-grid

inline-grid är inte lika vanligt som grid, men det kan användas effektivt i specifika scenarier.

  • Grid i en inline-kontext: Användbart när du vill placera ett grid bredvid textinnehåll eller andra inline-element. Till exempel är det användbart när en grid-struktur behövs för knappar, märken, etiketter etc., men du vill visa det inline utan att störa textflödet.

  • Layoutkontroll inom inline-element: Även när komplexa layouter behövs inom inline-element som länkar, knappar eller spans kan inline-grid hantera den interna strukturen med en grid-layout utan att använda block-visning.

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

I detta fall visas ikoner och text i en grid på knappen och förblir inline i dokumentflödet.

  • Responsiva inline-komponenter: inline-grid kan användas för små komponenter som är en del av inline-innehåll och kräver en grid-layout. Till exempel är det lämpligt för inline-formulär, märken, produktetiketter etc., där du vill justera layouten med en grid samtidigt som du håller det inline.

Justering och storlek för inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Precis som andra inline-element respekterar inline-grid vertikal justering i förhållande till omgivande innehåll. Du kan kontrollera justeringen av gridet med hjälp av egenskapen vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • När det gäller storlek tar ett inline-grid-element bara upp den bredd som krävs av dess rutnätsinnehåll. Vid behov kan du uttryckligen ange bredd, höjd samt minimi- och maxdimensioner.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Det är också möjligt att layouten av själva rutnätet bestämmer storleken på inline-grid-behållaren, och denna tendens är starkare när flexibla enheter som fr, auto och procent används.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Flexbox-relaterade CSS-egenskaperCSS-egenskaper som är relaterade till kolumnlayout