Articles
Introduksjon til CSS
CSS-egenskaper relatert til rutenettoppsett

CSS-egenskaper relatert til rutenettoppsett

Denne artikkelen forklarer CSS-egenskaper relatert til rutenettoppsett.

Du kan lære hvordan du beskriver rutenett og innlinjerutenett.

YouTube Video

HTML for 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>

Rutenettoppsett

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 rutenett er et oppsettsystem for å justere elementer i to-dimensjonale rader og kolonner. Ved bruk av et rutenett kan du enkelt og fleksibelt konstruere komplekse oppsett som var vanskelige med tradisjonelle float- eller position-metoder. Mens flexbox er utmerket for én-dimensjonale oppsett, er rutenettet egnet for to-dimensjonale oppsett.

  • grid-box-klassen bruker et rutenettoppsett ved å spesifisere grid i display-egenskapen. Dette elementet kalles en rutenettbeholder.
  • grid-template-columns-egenskapen angir bredden på rutenettkolonnene. I dette eksempelet er den første kolonnen 100px, den andre kolonnen er 200px, og den tredje kolonnen tar opp resten av plassen (auto).
  • grid-template-rows-egenskapen angir høyden på rutenettradene. Den første raden er 100px, den andre raden er automatisk (auto), og den tredje raden er 50px høy.
  • gap-egenskapen setter avstanden mellom rutenettelementer. Legger til 10px avstand mellom kolonner og rader.

Grunnleggende terminologi

  1. En rutenettbeholder er et element med display-egenskapen satt til grid, og barna blir rutenettelementer.
  2. Rutenettelementer er barneelementene som plasseres direkte under en rutenettbeholder.

Hovedegenskaper for rutenett

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • grid-template-columns- og grid-template-rows-egenskapene definerer størrelsen på hver kolonne og rad.
  • Enheter som px og %, samt fr (fraksjon) for å spesifisere en andel av den gjenværende plassen, kan brukes.
    • I dette eksemplet er det tre kolonner, og den andre kolonnen 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 spesifiserer hvilken kolonne eller rad grid-elementet skal plasseres i.
    • I dette eksemplet dekker elementet fra den 2. kolonnen til den 4. kolonnen og fra den 1. raden til den 3. 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 og grid-auto-columns er egenskaper som kontrollerer størrelsen på rader og kolonner som automatisk genereres når linjer eller kolonner i grid-oppsettet ikke er eksplisitt definert.
    • I dette eksemplet er 2 rader og 2 kolonner eksplisitt definert, men hvis flere elementer legges til, vil nye rader eller kolonner bli automatisk generert 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 grid-elementer horisontalt (justify-items) og 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 spesifiserer hvilken del av rutenettet objektet skal plasseres i.
    • I dette eksemplet betyr det å dekke fra den 1. raden til den 3. raden og fra den 2. kolonnen til den 4. kolonnen.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap legger til mellomrom mellom kolonner og rader. Du kan også spesifisere avstanden mellom kolonner og rader individuelt ved å bruke 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 egenskap som bestemmer hvilken retning elementer plasseres i, enten etter rad eller kolonne.

Eksempel på komplekse oppsett. 

 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åten lar grid deg lage en hel nettsideoppsett med enkel kode.

  • I dette eksempelet er det tre kolonner (sidefelt, hovedinnhold og reklame) og tre rader (topptekst, innhold og bunntekst).
  • Toppteksten og bunnteksten dekker hele bredden av siden, med innholdet i midten, og sidepanelet og annonsen på hver side.

Fordeler med grids

Fordelene med grids inkluderer følgende punkter:.

  • Enkel todimensjonal layout: Håndtering av oppsett i både rader og kolonner gjør det mulig å oppnå selv komplekse oppsett med mindre kode.
  • Kompatibel med responsiv design: Grid-systemet gjør det enkelt å lage responsive design som tilpasser seg forskjellige skjermstørrelser.

gap-egenskapen 

 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 brukes i grid-oppsett og flexbox-oppsett for å angi mellomrom (gaps) mellom elementer. Ved å bruke denne egenskapen kan du enkelt legge mellomrom mellom barneelementer.

  • I gap-grid-container-klassen er det satt et mellomrom på 30px vertikalt og 10px horisontalt mellom hvert element. Siden et 3-kolonners grid er laget med grid-template-columns, blir mellomrom anvendt vertikalt og horisontalt mellom hvert element. I gap-flex-container-klassen er det brukt et mellomrom på 50px mellom de tre elementene i flexboksen.

Grunnleggende Syntax 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap angir mellomrommet mellom radene. Dette er det vertikale mellomrommet i grid- eller flexlayouts.
  • column-gap angir mellomrommet mellom kolonnene. Dette er det horisontale mellomrommet.

Hvis to verdier ikke er spesifisert, brukes én verdi for både row-gap og column-gap.

Fordeler med gap-egenskapen

Fordelene med gap-egenskapen inkluderer følgende:.

  • Enkel mellomromsinnstilling: Koden for å angi mellomrom mellom barneelementer blir enklere, og det eliminerer behovet for å sette ekstra marginer eller padding mellom elementene.
  • Fleksibel tilpasning: Den støtter enkelt responsivt design og lar deg gjøre fleksible designjusteringer.

grid-template-areas-egenskapen 

 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}

grid-template-areas-egenskapen gir en måte å navngi områder innenfor en gridcontainer og bruke disse navnene for enkelt å posisjonere gridelementer. Å bruke denne egenskapen gir mulighet for visuelt intuitive layoutdefinisjoner.

Elementer plassert i navngitte områder spesifisert av grid-template-areas-egenskapen bør ha det samme navnet tilordnet med grid-area-egenskapen. Selv om elementer strekker seg over flere celler, blir de automatisk plassert riktig.

I dette eksemplet er griden opprettet som følger:.

  • I den første raden er "header" plassert over to kolonner.
  • "Sidebar" er plassert til venstre og "content" til høyre i den andre raden.
  • "Footer" er plassert over to kolonner i den tredje raden.

Grunnleggende bruk 

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

I grid-template-areas-egenskapen er navnet på området spesifisert for hver rad. Ved å plassere elementer i områder med tildelte navn kan du enkelt lage layouts. - I dette eksemplet opprettes en grid med 2 rader og 3 kolonner, og hver celle er navngitt som area1, area2, osv.

Definere tomme celler ved hjelp av . 

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

Hvis du ønsker å ha tomme celler i oppsettet ditt, kan du representere tomme celler ved hjelp av en . (punktum). - Som i dette eksempelet, ved å spesifisere en . mellom sidebar og content, blir den andre kolonnen tom.

Fordeler med egenskapen grid-template-areas

Fordelene med egenskapen grid-template-areas inkluderer følgende punkter.

  • Visuelt oppsett: Det lar deg uttrykke oppsettet visuelt, noe som gjør det enklere å forstå designet.
  • Enkel justering av elementer: Du kan enkelt justere elementoppsettet ved å endre områdedefinisjonene i CSS uten å endre HTML-en.

Notater

Når du bruker egenskapen grid-template-areas, er det viktig å være oppmerksom på følgende punkter.

  • Antall navn i hver rad må samsvare med antall definerte kolonner.
  • Å tildele samme navn til flere celler vil slå sammen disse cellene, men når de tildeles ulike rader eller kolonner, må 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 av verdiene for egenskapen display i CSS. Ved å bruke denne egenskapen oppfører elementet seg som en inline-konteiner og skaper en gridformateringskontekst internt. I motsetning til display: grid, oppfører det seg som et inline-element i dokumentflyten.

Brukstilfeller for inline-grid

inline-grid er ikke like vanlig som grid, men det kan brukes effektivt i spesifikke scenarier.

  • Grid innenfor en inline-kontekst: Nyttig når du vil plassere et grid ved siden av tekstinnhold eller andre inline-elementer. For eksempel er det nyttig når det trengs en gridstruktur for knapper, merker, etiketter osv., men du vil vise det inline uten å bryte tekstflyten.

  • Oppsettstyring innenfor inline-elementer: Selv når komplekse oppsett er nødvendig innenfor inline-elementer som lenker, knapper eller spans, kan inline-grid håndtere den interne strukturen med et gridoppsett uten å bruke blokkvisning.

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

I dette tilfellet viser knappen ikoner og tekst i et grid, samtidig som den forblir inline i dokumentflyten.

  • Responsive inline-komponenter: inline-grid kan brukes for små komponenter som er en del av inline-innhold og som krever et gridoppsett. For eksempel er det egnet for inline-skjemaer, merker, produktetiketter osv., der du ønsker å justere oppsettet med et grid, samtidig som det forblir inline.

Justering og størrelse for 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 omgivende innhold. Du kan kontrollere justeringen av gridet ved å bruke egenskapen vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • Når det gjelder størrelse, tar et inline-grid-element bare opp bredden som kreves av dets rutenettinnhold. Om nødvendig kan du eksplisitt angi bredde, høyde og minimums-/maksimumsdimensjoner.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Det er også mulig at utformingen av selve rutenettet bestemmer størrelsen på inline-grid-containeren, og denne tendensen er sterkere når man bruker fleksible enheter som fr, auto og prosenter.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS-egenskaper relatert til FlexboxCSS-egenskaper relatert til kolonnelayout