Criando o Calendário CSS Com Grid
⌚ Tempo de Leitura: 5 Minutos
Construir um calendário com CSS Grid é algo fundamental para qualquer desenvolvedor, e não pode ser deixado de lado. Felizmente, construir um é algo muito simples, longe de ser qualquer bicho de sete cabeças.
Hoje vou te mostrar o passo a passo de como construir um calendário assim.
Aqui está o que você criará até o final deste artigo:
O que vamos aprender hoje?
Desenvolvendo o HTML
Estruturando a grade
Empurrando as datas
Desenvolvendo o HTML
Você pode dizer pela imagem que o calendário contém três partes:
O indicador do mês;
O indicador de dia da semana / fim de semana;
As próprias datas;
A melhor maneira de estruturar o HTML é seguir o que parece certo. Criaremos o HTML de acordo com as três seções seguintes:
<div class="calendar">
<div class="month-indicator">...</div>
<div class="day-of-week">...</div>
<div class="date-grid">...</div>
</div>Além das sessões, vamos precisar obrigatoriamente de sete colunas para a grade. Elas serão para os dias da semana do calendário.
Vamos focar no .day-of-week e .date-grid já que estamos falando apenas de grade.
Ou
Estruturando a grade
Existem duas formas de criar a grade em CSS.
A primeira forma é mesclar elementos de .day-of-week e .date-grid em um seletor. Se fizermos isso, podemos definir o seletor display: grid. Aqui está a aparência do HTML se fizéssemos isso:
Alguns benefícios que a organização no seu local trabalho traz são:
div class="grid">
<!-- Day of week -->
<div>Seg</div>
<div>Ter</div>
<div>Qua</div>
<div>Qui</div>
<div>Sex</div>
<div>Sab</div>
<div>Dom</div>
<button><time datetime="2021-02-01">1</time></button>
<button><time datetime="2021-02-02">2</time></button>
<button><time datetime="2021-02-03">3</time></button>
<button><time datetime="2021-02-28">28</time></button>
</div>Eu desencorajo esse método porque o HTML perde seu significado estrutural. Eu prefiro manter .day-of-week e .date-grid como elementos separados, se possível. Isso facilita a leitura / compreensão do código o desenvolvedor escreve.
Ou seja, mais simplicidade e agilidade para trabalhar.
Aqui está a estrutura HTML que escolho para trabalhar:
<div class="day-of-week">
<div>Seg</div>
<div>Ter</div>
<div>Qua</div>
<div>Qui</div>
<div>Sex</div>
<div>Sab</div>
<div>Dom</div>
</div>
<div class="date-grid">
<button><time datetime="2021-02-01">1</time></button>
<button><time datetime="2021-02-02">2</time></button>
<button><time datetime="2021-02-03">3</time></button>
<button><time datetime="2021-02-28">28</time></button>
</div>A melhor maneira de criar uma grade CSS com a estrutura que propus é usar subgrid. Infelizmente, a maioria dos navegadores ainda não suporta subgrid. Enquanto isso, a melhor maneira é criar duas grades separadas – uma para .day-of-week e outra para .date-grid.
Ambos .day-of-week e .date-grid podem usar a mesma grade de sete colunas.
/* The grid */
.day-of-week,
.date-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
Empurrando as datas
Fevereiro de 2021 começa na segunda. Se queremos que o calendário esteja correto, precisamos garantir:
1 fev 2021 cai na segunda
2 fev 2021 cai na terça
3 fev 2021 cai na quarta
E assim por diante…
Com CSS Grid, essa parte é fácil.
A CSS Grid possui um algoritmo de posicionamento que segue as seguintes regras (se você não definiu grid-auto-flow como dense):
- Coloque itens que tenham explícito grid-column ou grid-row primeiro
- Preencha o restante de acordo com o último item colocado
O que isso significa é:
Se o primeiro item estiver na coluna 2
O segundo item será colocado na coluna 3.
O terceiro item será colocado na coluna 4
O quarto item será colocado na coluna 5,
(Terminando as colunas passe para a próxima linha em sua respectiva coluna conforme a ordem)
E assim por diante…
Portanto, se posicionarmos em 1º de fevereiro na segunda coluna (segunda-feira), o restante das datas será colocada corretamente. Simples assim!
\/* Positioning the first day on a Friday */
.date-grid button:first-child {
grid-column: 6;
}
Conclusão de calendário com CSS Grid
Aprendeu a criar seu calendário com CSS Grid?
Que Tal Agora Conhecer Mais Sobre Desenvolvimento de Softwares Compreendendo Melhor a Programação?
Conheça o Pacote Full-Stack MASTER da Danki.Code, onde você aprende programação desde o absoluto ZERO ao Nível Avançado.
São +18 CURSOS em Mais de +2500 Aulas e Tudo com Suporte Individual Personalizado, Certificados, Satisfação Garantida 
Ou o Seu Dinheiro de Volta!
Clique em Saiba Mais e Veja Quem Você Pode se Tornar!
Curta e Compartilha!
Não esqueça de deixar sua opinião nos comentários, e claro, de compartilhar o conteúdo com um a amigo que se interesse! 😊👇
Descubra mais sobre Cantinho Binário
Assine para receber nossas notícias mais recentes por e-mail.