Test / CSS + Selecteurs

On dispose de 4 blocs dans un conteneur ! Dessiner le résultat.

.conteneur {

display: grid;

grid-template-columns: repeat(4, 1cm);

grid-auto-rows: 1cm;

grid-gap: 0.1cm;

grid-auto-flow: row;

}

div:nth-child(1) {

grid-column: 1/3;

grid-row: 1/3;}

div:nth-child(2) {

grid-column: 3/5;

grid-row: 2/5;}

div:nth-child(3) {

grid-row-end: span 2;

}

div:nth-child(4) {

grid-row: 2;

}

Indiquez les lignes sélectionnées par chaque sélecteur.

<h1>Heading L.1</h1> <article> <p>First paragraph</p> <p>Second paragraph</p> </article> <article> <div>div element</div> <p>First paragraph</p> </article> <p data-cont="last">paragraph</p>	sélecteurs	ligne(s)
	p:first-child
	body > p
	article + p
	article :nth-child(3)
	[data-cont="last"]

Donnez le code CSS (grid) pour créer le drapeau français.

Le html est imposé.

</div>

CSS / revoir

Grid : https://mozilladevelopers.github.io/playground/css-grid/02-first-grid/

Grid

La technologie CSS Grid est une révolution dans la conception de sites !

Grid est intégrée progressivement par les leaders du marché.

Notion de grille

Pensez aux villes américaines, voici un plan de Manhattan dans les années 18xx.

Pour réaliser cette grille, on définit :

des zones, ce qui définit des quartiers.
puis on y affecte des élements, ce qui place les maisons !

Ne perdons pas une minute et passons à l'action en créant notre première grille.

En action

Allez dans le simulateur de grid ( simu ).

Nous allons:

définir un plan,
placez notre code HTML dans les différentes zones définies par le quadrillage.

Définir un plan

dans le conteneur du simulateur tapez

.conteneur {
display :grid;
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}

Ce code définit le quadrillage suivant :

Définir le placement

.conteneur {
display :grid;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}

Associer le placement

Il ne reste plus qu'à associer le code HTML à une zone en indiquant tout simplement son nom.

Par exemple : it2 sera associé à la zone nav.

#it2 {
grid-area: nav;
}

Je vous laisse compléter le code (... c'est si facile) pour obtenir une vision simplifiée de la topologie du site.

Pages