Nous allons nous intéresser à la longueur des blocs !
Ouvrir un Jsfiddle et écrire les codes suivants :
Html
<section>
<p> ... </p>
<p>2</p>
</section>
CSS
p {
border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
La largeur des paragraphes est équivalent à auto.
Modifier la longueur des paragraphes
p:nth-child(1){
width : 80%;
}
p:nth-child(2){
width : 50vw;
}
Observez les largeurs des blocs en redimensionnant la fenêtre.
width :
Il existe de nombreuses valeurs disponibles pour définir la largeur d'un bloc.
Min/Max content
Modifier le CSS avec la valeur min-content :
p:nth-child(1){
width : min-content;
}
p:nth-child(2){
width : min-content;
}
Reprendre les questions avec le code HTML suivant
<section>
<p>je suis petit</p>
<p>Voici un mot très long : hyperprésidentialisation</p>
</section>
Cas du inline-block
Mettre le CSS suivant
p {
border : 1px solid black;
display : inline-block
}
p:nth-child(1){
width : min-content
}
p:nth-child(2){
width : min-content;
}
Pensez également à redimensionner la fenêtre.
Cas de la grille
reprendre le code suivant
html
<section>
<p>1</p>
<p>2</p>
</section>
section{
display : grid;
grid-auto-flow : column;
}
css
p {
border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
Grâce à display:grid les paragraphes ont la même taille !
Donner le CSS suivant
section{
display : grid;
grid-template-columns : 1fr 1fr;
}
p {
border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
Grâce à display:grid les paragraphes ont la même taille !
Attention, notre conclusion est fausse ! il ne faut pas penser en terme de taille mais de répartition.
L'unité fr n'est pas une longueur et ne peut pas être utilisée avec calc () de la même manière qu'une unité de pourcentage ou de longueur.
Reprenons les exemples avec le HTML et CSS suivant !
<section>
<p>je suis petit</p>
<p>Voici un mot très long : hyperprésidentialisation</p>
</section>
section{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
p {
border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
Observons la largueur des paragraphes
Ecrire le CSS suivant
section{
display: grid;
grid-template-columns: repeat(2
, 50%);
grid-gap: 20px;
}
Le comportement sera le suivant
Bilan :
Si vous utilisez simplement l'unité fr telle qu'elle est spécifiée, elle diffère de l'utilisation d'un pourcentage car elle distribue l'espace disponible.
Pour garantir une même taille et répartir l'ensemble de la place grid-template-columns: repeat(2, minmax(0 ,1fr));
