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


  1. enoncé
  2. coche
  3. 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 !

Que faut il modifier ?

Plus d'infos »

Ordre des blocs placés automatiquement : grid;

Utilisons  le simulateur et appliquons le style suivant :

.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 :

  1. Le bloc 1 est traité en priorité (bloc fixe). 
  2. Pour grid-auto-flow: row; nous recherchons des blocs qui ont l'attribut grid-row déclaré. Le bloc 3 est traité
  3. 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.




Pour remplir les trous vides  grid-auto-flow: dense; fait des merveilles


Libellés :

Pour tout s'avoir du placement des blocs dans une grille ! niveau expert

Déterminer le placement des blocs sur la grille.

<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

Plus d'infos »
Libellés :

Grid en folie

http://codepen.io/collection/DgwjNL/
Libellés :
Inscription à : Articles (Atom)