Grid för layout
Tidigare sätt att strukturera webbsidor
För länge sedan användes tabeller för att strukturera innehållet på webbsidor men det gör vi absolut inte nu.
Ett senare sätt är flytande layoyt med float. På nätet finns många lösningar på flytande layout med float, clear och overflow. Vill du se mer av det finns det en gammal teorisida under övrigt i menyn..
Ett modernare sätt kom för inte så länge sedan och är "flexbox".
Det senaste och bästa är "grid" vilket vi kommer använda i den här kursen.
Grunder
Börja med att studera dessa tre teoriavsnitt hos w3schools.
w3schools: Grid Intro
Har du koll på följande begrepp?
display: grid;
grid-gap: 50px;
logik med "lines" runt kolumner och rader
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
w3schools: Grid Container
Har du koll på följande begrepp?
grid-template-columns: 80px 200px auto 40px;
grid-template-rows: 80px 200px;
(justify-content och align-content inte så viktigt i nuläget)
w3schools: Grid Item
Har du koll på följande begrepp?
grid-column: 1 / 5;
grid-column: 1 / span 3;
grid-row: 1 / span 2;
grid-area: 2 / 1 / span 2 / span 3;
w3schools: Grid Item
Har du koll på följande begrepp?
grid-area
grid-template-areas
Exempel:
grid-area: myArea;
grid-template-areas: 'myArea myArea myArea myArea myArea';
grid-template-areas: 'myArea myArea . . .';
----------------------------------
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
Ett exempel
Här kommer ett exempel som är lämpligt att exprimentera med.
<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';
grid-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>The grid-area Property</h1>
<p>You can use the <em>grid-area</em> property to name grid items.</p>
<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>
<p>This grid layout contains six columns and three rows:</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>
The grid-area Property
You can use the grid-area property to name grid items.
You can refer to the name when you set up the grid layout, by using the grid-template-areas property on the grid container.
This grid layout contains six columns and three rows:
Titta igenom följande teoriavsnitt hos flaviocopes.com .
flaviocopes.com
Har du koll på följande begrepp?
fr - fraction
repeat
minmax
Källor
w3schools - grid
flaviocopes.com/css-grid/
A Beginner's Tutorial to the CSS Grid (By Example!)(video 18min)
https://gridbyexample.com/examples/