Dia 28/2019 - CSS Grid Layout

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 28, mostrando o uso do CSS grid layout.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 28</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; list-style: none; outline: none; }
body { background: #4b1f71; font-family: Arial, Helvetica, sans-serif; }
.container { margin: 80px auto; max-width: 992px; text-align: center; width: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="./day-28.css">
</head>
<body>
<div class="container">
<!-- grid -->
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item col-2">2</div>
<div class="grid-item row-2">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item col-3">8</div>
<div class="grid-item">9</div>
<div class="grid-item col-2">10</div>
</div>
<div class="bg">
<div class="snow snow--1"></div>
<div class="snow snow--2"></div>
<div class="snow snow--3"></div>
<div class="snow snow--4"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
:root {
--grid-number: auto;
--grid-gutter: 0;
--grid-col: 1;
--grid-row: 1;
--grid-order: 0;
}

.grid { display: grid; grid-gap: var(--grid-gutter); grid-auto-flow: row dense; --grid-number: 3; --grid-gutter: 1rem; }

.grid-item { background: #210738; color: #fff; padding: 1rem; }

.col-2 { --grid-col: 2; }
.col-3 { --grid-col: 3; }
.row-2 { --grid-row: 2; }

@media (min-width: 480px) {
.grid { grid-template-columns: repeat(var(--grid-number), 1fr); }
.grid-item {
grid-column: auto / span var(--grid-col, auto);
grid-row: auto / span var(--grid-row, auto);
order: var(--grid-order,0);
}
}

.bg {
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
max-width: 100%;
z-index: -1;
width: 100%;
}

.snow {
animation: _fall linear infinite both;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate3D(0, -100%, 0);
}

.snow--1,
.snow--3 { background-image: url("./snow-1.png"); background-size: contain; }
.snow--2,
.snow--4 { background-image: url("./snow-2.png"); background-size: contain; }

.snow--1 { animation-duration: 15s; }
.snow--2 { animation-duration: 10s; }
.snow--3 { animation-duration: 20s; }
.snow--4 { animation-duration: 15s; }

@keyframes _fall {
0% { transform: translate3D(-7.5%, -100%, 0); }
100% { transform: translate3D(7.5%, 100%, 0); }
}

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.