Grid

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap/1886111-une-grille Grid: Example:

header, nav, section, aside, footer { /défini le padding avec 1% du height de l'écran en haut et en bas, 1% du width de l'écran à gauche et à droite/ padding: 1vh 1vw; } body { /défini la hauteur du body à 100% de la hauteur de l'ecran/ height: 100vh; margin: 0; padding: 0; /parametre les enfants de body dans une grille/ display: grid; /place 2 colonnes à la grille avec pour largeur 75% du width de l'écran pour la 1ère colonne et comble le reste pour la 2ème colonne en utilisant la variable 1fr/ grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; /défini les zones de placement dans la grille avec un nom/ grid-template-areas: "header header" "nav nav" "section aside" "footer footer"; } header { /affecte la balise header dans la zone de la grille avec le nom header/ grid-area: header; } nav { /affecte la balise nav dans la zone de la grille avec le nom nav/ grid-area: nav; /parametre les enfants de nav en flex/ display: flex; /défini le comportement des enfants en row et warp/ flex-flow: row wrap; /aligne horizontalement les enfants en space-around/ justify-content:space-around; /aligne verticalement les enfants en center/ align-items: center;

} nav a { font-size: 2em; } section { /affecte la balise section dans la zone de la grille avec le nom section/ grid-area: section; /parametre les enfants de section en flex/ display: flex; /défini le comportement des enfants en row et warp/ flex-flow: row wrap; /aligne horizontalement les enfants en space-between/ justify-content: space-around; } article { width: 47%; } article img { width: 95%; } aside { grid-area: aside; } aside form { display: flex; flex-flow: column; justify-content:center; } aside input { padding: 0 1vw; margin-bottom: 1vw; border: none; border-radius: 0.5em; line-height: 2em; height: 2em; } aside input[type="submit"] { width: 7em; } footer { grid-area: footer; }

/* écran large */ @media screen and (min-width: 1200px) {

}

/* tablet de portrait à landscape et desktop */ @media screen and (min-width: 768px) and (max-width: 992px) { section { flex-flow: column; justify-content:center; } article { width: 100%; } }

/* smartphone landscape à tablet portrait */ @media screen and (max-width: 768px) { body { grid-template-columns: 1fr; grid-template-areas: "header" "nav" "section" "aside" "footer"; } nav a { font-size: 1em; } section { display: flex; flex-flow: column; justify-content:center; } article { padding: 1%; width: 100%; } article p { width: 95%; } aside h1 { display: none; } aside form { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items:center; } aside input { width: 20vw; min-width: 85px; margin: 0 1%; } }

Flex

body { font-family: 'Inconsolata', monospace; background-color: rgb(5%, 45%, 72%); color: rgb(4%, 25%, 40%); } header { text-align: center; } #logo { width: 50vw; } .entete { margin: 2% auto; padding: 1%; width: 72%; color: white; } h1 { font-size: 3vw; } article { border-radius: 0.5em; background-color: rgb(4%, 25%, 40%); } p { font-size: 2vw; } ul { padding: 2% 0; margin: 0; margin-bottom: 2%; width: 50%;

list-style: none;

border-radius: 0.5em;
background-color: white;

} li { margin: 2%; width: 10vh; height: 10vh; line-height: 10vh;

font-family: 'Inconsolata', monospace;
text-align: center;
font-size: 2vw;
color: white;

border-radius: 10%;
background-color: rgb(7%, 50%, 75%);

}

.parent { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; } .enfant {

} /* flex-direction */ .row { -webkit-flex-direction: row; flex-direction: row; } .row-reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .column { -webkit-flex-direction: column; flex-direction: column; } .column-reverse { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }

/* flex-wrap */ .nowrap { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .wrap-reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }

/* flex-flow */ .flex-flow { -webkit-flex-flow: wrap row; flex-flow: wrap row; }

/* justify-content */ #justify-content ul { width: 100%; } .flex-start { justify-content: flex-start; } .flex-end { justify-content: flex-end; } .center { justify-content: center; } .space-between { justify-content: space-between; } .space-around { justify-content: space-around; } .space-evenly { justify-content: space-evenly; }

/* align-items */ #align-items ul { width: 100%; } #align-items li { width: 20%; height: 20%; font-size: 1em; border-radius: 1vw; } #align-items .baseline li:first-child, #align-items .baseline li:nth-child(3) { height: 30vh; } #align-items .baseline li:nth-child(2) { height: 20vh; } #align-items .baseline li:last-child { height: 40vh; } #align-items p { display: box; background-color: rgb(4%, 25%, 40%); } #align-items .stretch li { height: auto; } #align-items .flex-start { -webkit-align-items: flex-start; align-items: flex-start; } #align-items .flex-end { -webkit-align-items: flex-end; align-items: flex-end; } #align-items .center { -webkit-align-items: center; align-items: center; } #align-items .baseline { -webkit-align-items: baseline; align-items: baseline; } #align-items .stretch { -webkit-align-items: stretch; align-items: stretch; }

/* align-content */ #align-content ul { -webkit-flex-flow: row wrap; flex-flow: row wrap; } #align-content li { margin: 0; width: 20%; height: 20%; font-size: 1em; border-radius: 1vw; -webkit-flex-flow: wrap row; flex-flow: wrap row; } #align-content p { display: box; background-color: rgb(4%, 25%, 40%); } #align-content .flex-start { -webkit-align-content: flex-start; align-content: flex-start; } #align-content .flex-end { -webkit-align-content: flex-end; align-content: flex-end; } #align-content .center { -webkit-align-content: center; align-content: center; } #align-content .space-between { -webkit-align-content: space-between; align-content: space-between; } #align-content .space-around { -webkit-align-content: space-around; align-content: space-around; } #align-content .stretch { -webkit-align-content: space-around; align-content: space-around; }