Ir konteineris, kura klases nosaukums ir wrapper. Tajā iekšā ir elementi a, b, c, d, e, f, tie visi ir ar kopīgo klasi box. Tajā pat laikā ir arī otra klase, kas katram ir unikāla.
CSS konteinerim jānorāda īpašība – display: grid;
CSS konteinerim jānorāda īpašība – grid-template-columns: 100px 100px 100px; Šajā gadījumā rāmis būs fiksēta, nemainīga izmēra (fixed).
grid-template-columns: 1fr 1fr 1fr; Šajā gadījumā rāmis būs mainīga izmēra, kas pielāgojas ekrāna izmēram (fluid).
Izmantojot grid var viegli veidot responsive izkārtojumus. grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
Kods no dotā attēla:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 100px 100px 100px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 1 / 2 / 2 / 3;
}
.c {
grid-area: 1 / 3 / 2 / 4;
}
.d {
grid-area: 2 / 1 / 3 / 2;
}
.e {
grid-area: 2 / 2 / 3 / 4;
}
.f {
grid-area: 3 / 1 / 4 / 4;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
</body>
</html>
Katram elementam ir savs novietojums – grid-area
.f {
grid-area: 3 / 1 / 4 / 4;
}
Pirmais skaitlis norāda rindu, kurā sākas elements. Otrais skaitlis norāda kolonu, kurā sākas elements. Trešais skaitlis norāda rindu, kurā beidzas elements. Ceturtais skaitlis norāda kolonu, kurā beidzas elements.
1. uzdevums
2. uzdevums
