Articles
Introduktion til CSS
CSS-egenskaber relateret til gitterlayout

CSS-egenskaber relateret til gitterlayout

Denne artikel forklarer CSS-egenskaber, der er relateret til gitterlayout.

Du kan lære, hvordan man beskriver gitter og inline-gitter.

YouTube Video

HTML til forhåndsvisning

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>

Gitterlayout

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}

Et gitter er et layouts system til at justere elementer i todimensionale rækker og kolonner. Ved hjælp af et gitter kan du nemt og fleksibelt konstruere komplekse layouts, som var vanskelige med traditionelle float- eller position-metoder. Mens flexbox udmærker sig ved endimensionale layouts, er gitter velegnet til todimensionale layouts.

  • Klassen grid-box anvender et gitterlayout ved at specificere grid i display-egenskaben. Dette element kaldes en gitterbeholder.
  • grid-template-columns-egenskaben angiver bredden på gitterkolonner. I dette eksempel er den første kolonne 100px, den anden kolonne er 200px, og den tredje kolonne optager den resterende plads (auto).
  • grid-template-rows-egenskaben angiver højden på gitterrækker. Den første række er 100px, den anden række er automatisk (auto), og den tredje række er 50px høj.
  • gap-egenskaben sætter afstanden mellem gitterelementer. Tilføjelse af 10px plads mellem kolonner og rækker.

Grundlæggende terminologi

  1. En gitterbeholder er et element med display-egenskaben sat til grid, og dens børn bliver til gitterelementer.
  2. Gitterelementer er de børneelementer, der er placeret direkte under en gitterbeholder.

Primære gitteregenskaber

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • grid-template-columns- og grid-template-rows-egenskaberne definerer størrelsen på hver kolonne og række.
  • Enheder som px og % samt fr (fraktion) til at specificere en andel af den resterende plads kan bruges.
    • I dette eksempel er der tre kolonner, og den anden kolonne er dobbelt så bred som de andre.
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 og grid-row angiver, hvilken kolonne eller række gitterelementet placeres i.
    • I dette eksempel strækker elementet sig fra den 2. kolonne til den 4. kolonne og fra den 1. række til den 3. række.
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 og grid-auto-columns er egenskaber, der styrer størrelsen på rækker og kolonner, der automatisk genereres, når gitteropstillingslinjer eller -kolonner ikke er eksplicit defineret.
    • I dette eksempel er 2 rækker og 2 kolonner eksplicit defineret, men hvis der tilføjes flere elementer, vil nye rækker eller kolonner blive automatisk genereret i henhold til grid-auto-rows og grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Justér gitterelementer vandret (justify-items) og lodret (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 angiver på én gang, hvilket område af gittercontaineren gitterelementet skal placeres i.
    • I dette eksempel betyder det at optage fra den 1. række til den 3. række og fra den 2. kolonne til den 4. kolonne.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap tilføjer plads mellem kolonner og rækker. Du kan også angive afstanden mellem kolonner og rækker individuelt ved hjælp af column-gap og row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow er en egenskab, der angiver den retning, hvor elementerne placeres, enten efter række eller kolonne.

Eksempel på komplekse layouts 

 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å denne måde giver grid dig mulighed for at oprette et komplet sideopsætning med enkel kode.

  • I dette eksempel er der tre kolonner (sidebar, hovedindhold og annonce) og tre rækker (header, indhold og footer).
  • Headeren og footeren optager hele bredden af siden, med indholdet i midten og sidebar og reklame på begge sider.

Fordele ved gitter

Fordelene ved grid omfatter følgende punkter:.

  • Nem to-dimensionelt layout: At håndtere layoutet i både rækker og kolonner gør det muligt at opnå selv komplekse layouts med mindre kode.
  • Kompatibel med responsivt design: Gitter-systemet gør det nemt at skabe responsive designs, der tilpasser sig forskellige skærmstørrelser.

gap egenskab 

 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-egenskaben bruges i gitter- og flexbox-layouts til at angive mellemrum (gaps) mellem elementer. Ved hjælp af denne egenskab kan du nemt placere mellemrum mellem underordnede elementer.

  • I klassen gap-grid-container er der et mellemrum på 30px vertikalt og 10px horisontalt mellem hvert element. Eftersom et 3-kolonne gitter er oprettet med grid-template-columns, anvendes mellemrum vertikalt og horisontalt mellem hvert element. I klassen gap-flex-container anvendes et mellemrum på 50px mellem de tre elementer i flexboksen.

Grundlæggende syntaks 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap angiver mellemrummet mellem rækker. Dette er den vertikale afstand i gitter- eller flexlayouts.
  • column-gap angiver mellemrummet mellem kolonner. Dette er den horisontale afstand.

Hvis der ikke angives to værdier, anvendes en enkelt værdi på både row-gap og column-gap.

Fordele ved egenskaben gap

Fordelene ved egenskaben gap inkluderer følgende:.

  • Enkel opsætning af mellemrum: Koden for at oprette mellemrum mellem underordnede elementer bliver enklere, og det er ikke nødvendigt at tilføje ekstra marginer eller polstring mellem elementer.
  • Fleksibel tilpasning: Det understøtter nemt responsive designs og tillader fleksible designjusteringer.

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

Egenskaben grid-template-areas giver mulighed for at navngive områder i en gitterbeholder og bruge de navne til nemt at placere gitterelementer. Ved at bruge denne egenskab kan du skabe visuelt intuitive layoutdefinitioner.

Elementer placeret i navngivne områder, der er angivet med grid-template-areas-egenskaben, bør have samme navn tildelt med grid-area-egenskaben. Selv hvis elementer strækker sig over flere celler, vil de automatisk blive placeret korrekt.

I dette eksempel oprettes gitteret som følger:.

  • I den første række placeres "header" hen over to kolonner.
  • "Sidebar" placeres til venstre og "content" til højre i den anden række.
  • "Footer" placeres hen over to kolonner i den tredje række.

Grundlæggende Brug 

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

I egenskaben grid-template-areas angives navnet på området for hver række. Ved at placere elementer i områder med tildelte navne kan du nemt oprette layouts. - I dette eksempel oprettes et gitter med 2 rækker og 3 kolonner, hvor hver celle er navngivet area1, area2 osv.

Definere tomme celler ved hjælp af . 

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

Hvis du vil have tomme celler i dit layout, kan du repræsentere tomme celler ved hjælp af en . (punktum). - Som i dette eksempel, ved at angive en . mellem sidebar og content, bliver den anden kolonne tom.

Fordelene ved grid-template-areas-egenskaben

Fordelene ved grid-template-areas-egenskaben inkluderer følgende punkter.

  • Visuelt layout: Det gør det muligt at udtrykke layout visuelt, hvilket gør det lettere at forstå designet.
  • Nem elementflytning: Du kan nemt justere elementlayoutet ved at ændre områdedefinitionerne i CSS uden at ændre HTML'en.

Noter

Når du bruger grid-template-areas-egenskaben, er det vigtigt at være opmærksom på følgende punkter.

  • Antallet af navne i hver række skal matche antallet af definerede kolonner.
  • Tildeling af det samme navn til flere celler vil fusionere disse celler, men når det tildeles til forskellige rækker eller kolonner, skal området være kvadratisk.

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 er en af værdierne for display-egenskaben i CSS. Ved anvendelse af denne egenskab opfører elementet sig som en inline-container og skaber en intern gitterformateringskontekst. I modsætning til display: grid opfører det sig som et inline-element i dokumentflowet.

Brugstilfælde for inline-grid

inline-grid er ikke så almindeligt som grid, men det kan effektivt bruges i specifikke scenarier.

  • Gitter inden for inline-kontekst: Nyttigt, når du vil placere et gitter ved siden af tekstindhold eller andre inline-elementer. For eksempel er det nyttigt, når der er behov for en gitterstruktur til knapper, badges, etiketter osv., men du vil vise det inline uden at forstyrre tekstflowet.

  • Layoutstyring inden for inline-elementer: Selv når komplekse layouts er nødvendige inden for inline-elementer som links, knapper eller spans, kan inline-grid håndtere den interne struktur med et grid-layout uden at skifte til blokvisning.

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

I dette tilfælde viser knappen ikoner og tekst i et gitter, mens den forbliver inline i dokumentflowet.

  • Responsive inline-komponenter: inline-grid kan bruges til små komponenter, der er en del af inline-indhold og kræver et grid-layout. For eksempel er det velegnet til inline-formularer, badges, produktetiketter osv., hvor du vil justere layoutet med et grid, mens du holder det inline.

Justering og størrelsesændring af inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Som andre inline-elementer respekterer inline-grid vertikal justering i forhold til det omgivende indhold. Du kan kontrollere justeringen af gitteret ved hjælp af vertical-align-egenskaben.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • Med hensyn til størrelse optager et inline-grid-element kun den bredde, der kræves af dets gitterindhold. Hvis det er nødvendigt, kan du eksplicit angive bredden, højden og minimums-/maksimaldimensionsgrænserne.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Det er også muligt, at layoutet af selve gitteret bestemmer størrelsen på inline-grid-containeren, og denne tendens er stærkere, når der anvendes fleksible enheder såsom fr, auto og procentdele.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Flexbox-relaterede CSS-egenskaberCSS-egenskaber relateret til kolonnelayout