https://dupontdenis.github.io/simulateur/
Grid : without dense
Reprenez le simulateur : https://dupontcss.blogspot.com/p/test-grill.html
Ecrivez le code suivant :
.conteneur {
display:grid;grid-template-columns: [A] 1fr [B] 1fr [C] 1fr [D] 1fr 1fr;
grid-auto-rows: 100px;
}
#it1 {
grid-column: A
}
#it2 {
grid-column: A
}
#it3 {
grid-column: C
}
#it4 {
grid-column: C
}
Autre idée !
Ajoutez la régle grid-auto-flow: dense au conteneur :
.conteneur {
display:grid;
grid-template-columns: [A] 1fr [B] 1fr [C] 1fr [D] 1fr 1fr;
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
Remplacez grid-auto-flow: dense par grid-auto-flow: column;
Testez la régle grid-auto-flow: column; dans l'exemple suivant :
See the Pen pays drapeaux by dupont (@dupontcodepen) on CodePen.
Résumé sur le placement :
Le flux est en ligne, un element qui a sa colonne fixée bloque le flux !
notez
Le flux est en colonne, on ne peut passer devant un element qui a sa ligne fixée.
notez
Projet grid
See the Pen fetch img cat by dupont (@dupontcodepen) on CodePen.
Help :
CSS : 10 premieres minutes !
Projet grid
Soyez attentif au classe : <li class="highlight-box"><img src="http:...04.jpg" /></li>
Autre exemple de grille dense !
Modifier la taille de la fênetre et remarquez l'adaptation de l'ordre des images pour remplir la grille grace à la régle grid-auto-flow: dense;
See the Pen Image Gallery — grid (8/9) by dupont (@dupontcodepen) on CodePen.
See the Pen Grid auto-flow dense by dupont (@dupontcodepen) on CodePen.
Articles sur grid
Voici une liste d'articles triés par :
Date :
https://dupontcss.blogspot.com/search?q=grid&max-results=20&by-date=true
Pertinence :
bootswatch
https://bootswatch.com/
Choisissez le model et copier le lien !
Par exemple : https://bootswatch.com/5/litera/bootstrap.min.css
<link rel="stylesheet" href="https://bootswatch.com/5/litera/bootstrap.min.css">
Opacité et contexte d'empilement ++
Dessinez le résultat
 |
| Z-index de P = 1.1000 |
Que devient le code sans opacity !
 |
| Z-index de p : 1000 |
L'opacité (comme position relative) crée un contexte d'empilement.
Layer : chrome
Chrome permet d'inspecter le layer et de voir son profil.
Il faut dans un premier temps aller dans
More tools-> Layers de votre inspecteur.
Voici les "tapes à suivre pour animer la construction des dessins.
 |
| https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index |
Gouttier : flex
Gouttière : how to !
HTML
<div class="conteneur">
<div class="row">
<div id="it1">
<p>Lore</p>
</div>
</div>
</div>
Visuel
HTML
<div class="conteneur">
<div class="row">
<div id="it1">
<p>Lore</p>
</div>
</div>
</div>
Visuel
CSS
CSS
.row {
display: flex;
flex-wrap: wrap;
}
.row > * {
flex: 0 0 33.333333%;
box-sizing: border-box;
max-width:33.33333%;
}
Affichage : white-space
Il est possible de jouter sur la propriété white-space pour afficher "correctement" le paragraphe suivant :
<p>Passent les jours et passent les semaines
Ni temps passé
Ni les amours reviennent
Sous le pont Mirabeau coule la Seine
Vienne la nuit sonne l’heure
Les jours s’en vont je demeure</p>
 |
| Affichage sans style |
element.style
- white-space: pre;
 |
| Affichage avec white-space |
Inscription à :
Articles (Atom)