Scribd
Carica
0 visualizzazioni13 pagine

02.02 Slides CSS - Grid

Il documento tratta dell'uso del CSS Grid per la creazione di layout. Vengono presentati vari comandi e proprietà come 'grid-template-columns', 'gap', 'justify-content' e 'align-content', con esempi pratici di utilizzo. Si evidenzia che solo l'ultima definizione di ciascuna proprietà sarà applicata nella pratica.

Caricato da

rafaelura08
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
0 visualizzazioni13 pagine

02.02 Slides CSS - Grid

Il documento tratta dell'uso del CSS Grid per la creazione di layout. Vengono presentati vari comandi e proprietà come 'grid-template-columns', 'gap', 'justify-content' e 'align-content', con esempi pratici di utilizzo. Si evidenzia che solo l'ultima definizione di ciascuna proprietà sarà applicata nella pratica.

Caricato da

rafaelura08
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 13

CSS - Grid

Gustavo Marino Botta

1
Grid Container

2
display: grid;
<div class="grid-container"> <style>
<div>1</div> .grid-container {
Formatação do container e
<div>2</div> das DIVs para facilitar a display: grid;
visualização.
<div>3</div> background-color: yellowgreen;
Nos próximos slides estes
<div>4</div> comandos serão omitidos. }
<div>5</div>
.grid-container>div {
</div>
background-color: gray;
border: 1px solid red;
padding: 10px;
font-size: 30px;
}
</style>
A cor de fundo está
totalmente coberta pelo
grid, irá aparecer depois
com outros comandos. 3
grid-template-columns:
grid-template-rows:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-columns: 70px 140px auto 70px;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;

fr = fração
}

Uso de várias templates somente para


uso didático do slide. Na prática somente
o último de cada tipo será aplicado.

4
column-gap:
row-gap:
gap:
. grid-container {
display: grid; gap = lacuna (espaçamento entre o grid)

grid-template-columns: auto auto auto;


column-gap: 10px;
row-gap: 5px;
gap: 10px 5px; row-gap column-gap
gap: 15px;
}

Valor utilizado para


linha e coluna
Uso de vários gaps somente para uso
didático do slide. Na prática somente o
último será aplicado.

5
justify-content:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 15px;
justify-content: space-evenly;
justify-content: space-around;
justify-content: space-between;
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: stretch;
}

Uso de vários justify-content somente


para uso didático do slide. Na prática
somente o último será aplicado.
6
align-content:
espaço
.grid-container { uniforme
display: grid;
grid-template-columns: auto auto auto;
gap: 0px;
justify-content: stretch;
height: 150px;
align-content: center;
align-content: space-evenly;
align-content: space-around;
align-content: space-between;
align-content: start;
align-content: end;
align-content: stretch;
}

Uso de vários align-content somente para


uso didático do slide. Na prática somente
7
o último será aplicado.
Grid Item

8
HTML e CSS base
<div class="grid-container"> <style>
.grid-container {
<div class="item1">1</div>
display: grid;
<div class="item2">2</div> background-color: yellowgreen;
<div class="item3">3</div> grid-template-columns: repeat(5, 1fr);
<div class="item4">4</div> gap: 5px;
<div class="item5">5</div>
}
<div class="item6">6</div>
<div class="item7">7</div> .grid-container>div {
<div class="item8">8</div> background-color: gray;
<div class="item9">9</div> border: 1px solid red;
padding: 10px;
<div class="item10">10</div>
font-size: 30px;
</div> }
</style>

9
Grid Item – Linhas para inclusão dos
itens

10
Grid Item
Altera os itens individuais

.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

grid-column: 1 / 4;
grid-row: 1 / 3;

grid-column: 1 / span 2;
grid-row: 1 / span 3;

grid-area: 1 / 3 / 3 / 6;
grid-area: 2 / 2 / span 2 / span 3;
}

11
grid-row-start / grid-column-start / grid-row-end / grid-column-end
Nomeando itens da grade
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
grid-template-areas: 'area1 area1 area1 area1 area1';
grid-template-areas: 'area1 area1 . . .';
grid-template-areas:
'area1 area1 . . .'
'area1 area1 . . .';
}
.item1 {
grid-area: area1;
}
Uso de vários grid-template-areas
somente para uso didático do slide. Na
12
prática somente o último será aplicado.
Alinhando itens
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
grid-template-areas:
'area1 area1 . . .'
'area1 area1 . . .';
}

.item1 {
grid-area: area1;
justify-self: center;
align-self: center;
}

13

Potrebbero piacerti anche