Nous allons utiliser
"grid" pour réaliser un placement de blocs.
Code de départ
Nous écrivons un flux.
<section class="intro">
<h1>Quai </h1>
<h2><a href="#">voyager</a></h2>
<img src="https://www.ibisc.univ-evry.fr/~dupont/52.jpg" alt="test">
<p>Sous le rideau l'eau de la mer
</p>
</section>
le placement dans la grille de chaque balise permettra de modifier visuellement le flux (ordre des éléments)
Voici le résultat à obtenir après le placement des différents blocs.
La plus grande difficulté du projet est la création de la grille ; le codage ne devant pas poser de difficulté à un spécialiste CSS.
Voici la grille que l'on peut imaginer comme un calque sur votre projet.
Elle est constituée de 3 colonnes et de quatre lignes.
Examinons quelques exemples de placement
l'image
Le placement de l'image prend toute la largeur et 3 lignes.
Pour donner l'aspect final, il faudra jouer sur d'autres propriétés en particulier la taille doit être mise à 100% (du conteneur)
{ width: 100%; height: 100%; object-fit: fill; // ou object-fit: cover; opacity: 0.6;
}
le bloc : voyager
Le placement de ce bloc est simple.
Comme précédemment, il faudra un grand nombre d'ajouts pour obtenir le résultat final désiré.
{
text-transform: uppercase;
border: 1px solid black;
background: rgba(255, 255, 255, 0.6);
padding: 1rem 0.5rem 0.6rem;
font-size: 1.2rem;
margin: 0;
align-self: self-start; // permet de mettre le bloc en haut de l'emplacement.
}
Le bloc : Quai
L'idée initiale de placer le bloc "quai" au centre, ne permettrait pas à la bordure rouge de prendre toute la longueur.
Le placement du bloc doit donc s'étendre sur toute la second ligne.
L'ajout de propriété sur le body {text-align: center;} et sur le bloc { border-bottom: 20px solid red }
permettront de donner l'allure finale.
Les étapes du projet
Nous allons tenter de mettre en place une grille correspond aux attentes (du client).
Utilisation du simulateur
Avant de penser aux éléments réels du projet, nous allons penser en termes de blocs de couleur.
L'idée est d'arriver à construire une grille suivante :
Allez sur
http://dupontcss.blogspot.fr/p/test-grill.html
Ecrivez le code suivant
.conteneur {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
Ajouter les dispositions centrer
.conteneur {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 2em;
justify-content: center;
align-items: center;
text-align: center;
}
#it3 {
width : 100%;
height : 100%;
grid-column: 1 / -1;
grid-row: 1 / 4;
object-fit: fill;
opacity: 0.6;
z-index:3;
}
#it1 {
text-transform: uppercase;
grid-column: 1 / -1;
grid-row: 2 / 3;
font-size: calc(1rem + 1vw);
margin-left: 1rem;
margin-right: 1rem;
z-index : 2;
}
#it2 {
text-transform: uppercase;
border: 1px solid black;
background: rgba(255, 255, 255, 0.6);
padding: 1rem 0.5rem 0.6rem;
font-size: 1rem;
grid-column: 2 / 3;
grid-row: 3 / 4;
align-self: self-start;
z-index : 2;
}
#it4 {
grid-column: 1 / -1;
grid-row: 4 / 5;
align-self: center;
width: 66%;
justify-self: center;
font-size: calc(0.75rem + 1vw);
line-height: 1.5;
margin: 0;
}
En action :
See the Pen
Example grid by dupont (@dupontcodepen)
on CodePen.
