Published
Edited
Mar 9, 2022
1 fork
5 stars
<!-- HTML -->
<section class="exemplo">
<div class="layout-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</section>
<!-- CSS -->
<style>
.layout-1{
border: 1px solid #000;
display: grid;
grid-template-columns: auto; /* define as colunas */
grid-template-rows: auto; /* define as linhas */
}
.layout-1 .item{
border: 1px solid #fff;
background-color: white; /* altera a cor de fundo desses elementos para branco */
border: 1px solid lightblue; /* altera a borda desse elemento para uma borda sólida azul de 1px */
}
<style>
<!-- HTML -->
<section class="exemplo">
<div class="layout-2">
<div class="item item-1">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</section>
<!-- CSS -->
<style>
.layout-2{
border: 1px solid #000;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr ; /* 4 colunas iguais. Você trocar pelo método repeat(). Nesse caso, repeat(4, 1fr) */
grid-template-rows: 1fr 2fr; /* define 2 linhas, a segunda ocupando o dobro do espaço da primeira */
padding: 10px; /* define um espaçamento interno de 10px nas bordas do elemento */
gap: 10px; /* define um espaço de 10px entre os elementos */
}
.layout-2 > .item{
text-align: center; /* alinha o texto interno ao centro */
padding: 10px;
font-weight: bold;
background-color: #FFD37C;
}
.layout-2 > .item-1{
grid-column-start: 1;/* elemento começa no início da coluna 1 */
grid-column-end: span 4; /* elemento preenche 4 colunas */
grid-row-start: auto;/* posicionamento automático nas linhas */
grid-row-end: auto; /* elemento preenche 2 colunas */
background-color: #FF9B6D;
}
<style>
<!-- HTML -->
<section class="exemplo">
<div class="layout-3">
<div class="square-1"></div>
<div class="square-2"></div>
<div class="bar"></div>
</div>
</section>
<!-- CSS -->
<style>
.layout-3{
border: 1px solid #000;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
padding: 10px;
grid-gap: 10px;
width: 310px;
height: 150px;
}
.layout-3 > .square-1 {
background-color: orange;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.layout-3 > .square-2 {
background-color: orange;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.layout-3 > .bar {
width: 90%;
height: 10%;
background-color: red;
grid-column: 1 / span 2;
grid-row: 1 / span 1;
align-self: center; /* alinha o elemento ao centro na vertical - veja exemplo 2-A */
justify-self: center; /* alinha o elemento ao centro na horizontal - veja exemplo 2-A */
}
<style>
<!-- HTML -->
<section class="exemplo">
<div class="layout-4">
<div class="square cell1"></div>
<div class="circle cell1"></div>
<div class="square cell2"></div>
<div class="circle cell2"></div>
</div>
</section>
<!-- CSS -->
<style>
.layout-4{
border: 1px solid #000;
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 10px;
gap: 10px;
width: 310px;
height: 150px;
align-items: auto;
justify-items: auto;
}
.layout-4 > .square {
width: 100%;
aspect-ratio: 1;
background-color: orange;
}
.layout-4 > .circle {
aspect-ratio: 1;
width: 50%;
border-radius: 50%;
background-color: pink;
align-self: auto;
justify-self: auto;
}
.layout-4 > .cell1 {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.layout-4 > .cell2 {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
<style>
<!-- HTML -->
<section class="exemplo">
<div class="layout-5">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
</section>
<!-- CSS -->
<style>
.layout-5{
border: 1px solid #000;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: auto; /* define o fluxo de distribuição dos filhos */
grid-auto-columns: 1fr; /* define o tamanho das colunas adicionais, quando forem criadas */
padding: 10px;
gap: 10px;
width: 500px;
height: 150px;
align-items: stretch;
justify-items: stretch;
}
.layout-5 > .item {
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.layout-5 > .item:nth-child(odd) { /* somente filhos ímpares de #layout-5, com a classe .item, terão cor mais clara */
background-color: rgb(255, 230,230);
}
<style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
