div {
font-family: monospace;
}
font-family: monospace : En action
Pour avoir un taille de caractère identique ajouter au CSS la règle suivante :
Comment mettre en JS des attributs de Grille
let a = document.body.firstElementChild;
a.style.gridColumn = 5;
a.style.gridRow = 5;
En utilisanat cssText :
a.style.cssText = "grid-row:1/5;grid-column:3";
On peut même calculer les valeurs !
div.style.cssText = `grid-row:${Math.floor(i/this.grid.width)+1};grid-column:${col+1}`;
Notez pour certains attributs l'ajout de px :
`margin-left:${Math.floor(8)}px`;
voir ⇛fichier
a.style.gridColumn = 5;
a.style.gridRow = 5;
En utilisanat cssText :
a.style.cssText = "grid-row:1/5;grid-column:3";
On peut même calculer les valeurs !
div.style.cssText = `grid-row:${Math.floor(i/this.grid.width)+1};grid-column:${col+1}`;
Notez pour certains attributs l'ajout de px :
`margin-left:${Math.floor(8)}px`;
voir ⇛fichier
flex : en action
Voici un truc pour réaliser un effet.
fichier 🔺
Observez tout d'abord l'effet du hover !
p:hover, p:hover ~ p {
content : "\002605";
color : red;
}
Inversons donc l'ordre des éléments !
section {
display : flex;
flex-direction : row-reverse;
justify-content : flex-end;
}
fichier 🔁
fichier 🔺
Observez tout d'abord l'effet du hover !
p:hover, p:hover ~ p {
content : "\002605";
color : red;
}
Idée
Inverser l'ordre des éléments peut s’avérer fort utile !Inversons donc l'ordre des éléments !
section {
display : flex;
flex-direction : row-reverse;
justify-content : flex-end;
}
fichier 🔁
Version avancée :
fichier 🔂input : in action
Il est possible d’interagir sur le design sans JS
L'écriture de la régle CSS dépend de la strcture HTML
Dans le cas d'une structure de type
coche:not(:checked) ~ réponse {
display : none;
}
fichier↺
JS Bin on jsbin.com
Niveau avancé :
On souhaite mettre mainteant la coche en bas !
Que faut il modifier ?
L'écriture de la régle CSS dépend de la strcture HTML
Dans le cas d'une structure de type
- enoncé
- coche
- réponse
coche:not(:checked) ~ réponse {
display : none;
}
fichier↺
JS Bin on jsbin.com
Niveau avancé :
On souhaite mettre mainteant la coche en bas !
Ordre des blocs placés automatiquement : grid;
Utilisons le simulateur et appliquons le style suivant :
Une fois que les blocs fixes sont placés, les autres éléments sont placés automatiquement dans l'ordre du DOM (défini dans le HTML).
Dans notre exemple :
Les blocs bleu, vert et gris sont placés dans cet ordre.
Remarque : le bloc bleu défini après le bloc rouge se retrouve placé avant lui.
Pour les blocs "fixes", il peut y avoir intersection des zones. Les blocs se recouvrent dans l'ordre de leur position dans le DOM, voir Intersection.
Voici un Autre cas
.conteneur {
display : grid;
grid-template-columns:
repeat(2, 100px);
grid-auto-rows: 100px;
}
|
#it1 {
grid-column: 2;
grid-row: 1;
}
|
Nous allons tenter de comprendre l'algorithme utilisé pour placer les blocs.
Tout d'abord, les blocs "fixes" sont placés. On appelle bloc fixe un bloc qui à son emplacement défini en ligne et en colonne.
Dans notre exemple seul, le bloc rouge est un bloc fixe ; sa colonne et ligne sont définies.
Une fois que les blocs fixes sont placés, les autres éléments sont placés automatiquement dans l'ordre du DOM (défini dans le HTML).
Dans notre exemple :
Les blocs bleu, vert et gris sont placés dans cet ordre.
Remarque : le bloc bleu défini après le bloc rouge se retrouve placé avant lui.
Pour les blocs "fixes", il peut y avoir intersection des zones. Les blocs se recouvrent dans l'ordre de leur position dans le DOM, voir Intersection.
Cas des blocs définis sur la dimension définie par le flow.
Examinons ce cas
#it1 {
grid-row : 2;
grid-column : 2/3;
}
#it2 {
grid-column : span 2;
}
#it3 {
grid-row : 1;
}
Priorité des blocs :
- Le bloc 1 est traité en priorité (bloc fixe).
- Pour grid-auto-flow: row; nous recherchons des blocs qui ont l'attribut grid-row déclaré. Le bloc 3 est traité
- Les blocs restants sont traités par ordre du flux.
autre exemple
Cas des blocs définis uniquement sur une dimension.
Voici un Autre cas
exemple avec grid-column-end
.conteneur {
display : grid;
grid-template-columns:
repeat(2, 100px);
grid-auto-rows: 100px;
grid-gap: 10px;
}
|
#it1 {
grid-column: 2;
grid-row: 1 / 2;
}
#it2 {
grid-column-end: span 2;
}
|
Comme précédemment le bloc rouge est placé en priorité, ensuite le bloc bleu cherche une place où il peut se placer sans "toucher" les blocs fixes. Exemple
Les blocs vert et gris seront placés à la suite avec les mêmes conditions en respectant entre eux les précédences du DOM. Ils ne peuvent "dépasser" le bloc bleu.
Les blocs vert et gris seront placés à la suite avec les mêmes conditions en respectant entre eux les précédences du DOM. Ils ne peuvent "dépasser" le bloc bleu.
Pour remplir les trous vides grid-auto-flow: dense; fait des merveilles
Pour tout s'avoir du placement des blocs dans une grille ! niveau expert
Déterminer le placement des blocs sur la grille.
Les algorithmes utilisés sont très sensibles aux configurations.
Ce n'est pas simple.
Devenez un expert : lisez la suite.
Exemple
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
|
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 10px;
}
|
div:nth-child(4n+1) {
grid-column-end: span 2;
grid-row-end: span 2;
background-color: blue;
}
div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
|
Les algorithmes utilisés sont très sensibles aux configurations.
Ce n'est pas simple.
Devenez un expert : lisez la suite.
Exemple
Inscription à :
Commentaires (Atom)