Grilles CSS - Historique des versions

Xtof le 26 janvier 2018 à 07:03

2018-01-26T07:03:02Z

Xtof : /* pages maintenant */

2018-01-24T07:38:05Z

pages maintenant

Xtof : /* z-index */

2018-01-09T11:02:37Z

z-index

Xtof : /* z-index */

2018-01-09T11:01:30Z

z-index

Xtof : /* z-index */

2018-01-09T10:57:52Z

z-index

Xtof : /* z-index */

2018-01-09T10:54:53Z

z-index

Xtof : /* z-index */

2018-01-09T10:53:37Z

z-index

Xtof : /* z-index */

2018-01-09T10:52:05Z

z-index

Xtof : /* gouttière */

2018-01-09T10:50:09Z

gouttière

Xtof : /* Définitions */

2018-01-09T10:49:14Z

Définitions

← Version précédente		Version du 26 janvier 2018 à 07:03
Ligne 1 :		Ligne 1 :
−	> Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.	+	> Le module '''CSS Grid layout''' (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.

	> Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.		> Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.

@@ Ligne 9 : / Ligne 9 : @@
 == pages [[maintenant]] ==
-* cours interactif amorcé le [[2017-008]] et [[2017-009]]
+* cours interactif amorcé le [[2018-008]] et [[2018-009]]
 == 1. Aperçu ==

← Version précédente		Version du 9 janvier 2018 à 11:02
Ligne 126 :		Ligne 126 :


−	~~<iframe height='265' scrolling='no' title='~~	+	Cf détails sur https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
−	~~<div class="wrapper">~~
−	~~<div class="box box1">Un</div>~~
−	~~<div class="box box2">Deux</div>~~
−	~~<div class="box box3">Trois</div>~~
−	~~<div class="box box4">Quatre</div>~~
−	~~<div class="box box5">Cinq</div>~~
−	~~</div>~~
−
−	~~.wrapper {~~
−	~~display~~: ~~grid;~~
−	~~grid-tem' src='~~//~~codepen~~.io/xtof-party/embed/PEQGyV/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.~~io/xtof-party/pen/PEQGyV/'>~~
−	~~<div class="wrapper">~~
−	~~<div class="box box1">Un<~~/~~div>~~
−	~~<div class="box box2">Deux<~~/~~div>~~
−	~~<div class="box box3">Trois<~~/~~div>~~
−	~~<div class="box box4">Quatre<~~/~~div>~~
−	~~<div class="box box5">Cinq<~~/~~div>~~
−	</~~div>~~
−
−
	On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété `z-index`. Si nous donnons à `box2` un `z-index` inférieur à celui de `box1` il s'affichera sous `box1` dans la pile. > voir exemple sur https://codepen.io/xtof-party/details/govwVy/		On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété `z-index`. Si nous donnons à `box2` un `z-index` inférieur à celui de `box1` il s'affichera sous `box1` dans la pile. > voir exemple sur https://codepen.io/xtof-party/details/govwVy/

← Version précédente		Version du 9 janvier 2018 à 11:01
Ligne 147 :		Ligne 147 :


−	On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété `z-index`. Si nous donnons à `box2` un `z-index` inférieur à celui de `box1` il s'affichera sous `box1` dans la pile.	+	On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété `z-index`. Si nous donnons à `box2` un `z-index` inférieur à celui de `box1` il s'affichera sous `box1` dans la pile. > voir exemple sur https://codepen.io/xtof-party/details/govwVy/
−
−
−
−	<iframe height='265' scrolling='no' title='Contrôler l'ordre de superposition' src='//codepen.io/xtof-party/embed/qpxaGx/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/xtof-party/pen/qpxaGx/'>Contrôler l'ordre de superposition</a> by Christophe Ducamp (<a href='https://codepen.io/xtof-party'>@xtof-party</a>) on <a href='https://codepen.io'>CodePen</a>.
−	~~</iframe>~~
−
−	~~.wrapper {~~
−	~~display: grid;~~
−	~~grid-tem</a~~> ~~by Christophe Ducamp (<a href='~~https://codepen.io/xtof-party~~'>@xtof-party<~~/~~a>) on <a href='https://codepen.io'>CodePen<~~/~~a>.~~
−	</~~iframe>~~

	=== unité fr ===		=== unité fr ===

@@ Ligne 145 : / Ligne 145 : @@
    <div class="box box5">Cinq</div>
 </div>
 .wrapper {

@@ Ligne 125 : / Ligne 125 : @@
 * les zones peuvent se chevaucher partiellement
-<html>
-<p data-height="265" data-theme-id="0" data-slug-hash="PEQGyV" data-default-tab="css,result" data-user="xtof-party" data-embed-version="2" data-pen-title="
+<iframe height='265' scrolling='no' title='
 <div class="wrapper">
    <div class="box box1">Un</div>
@@ Ligne 137 : / Ligne 137 : @@
 .wrapper {
    display: grid;
-   grid-tem" class="codepen">See the Pen <a href="https://codepen.io/xtof-party/pen/PEQGyV/">
+   grid-tem' src='//codepen.io/xtof-party/embed/PEQGyV/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/xtof-party/pen/PEQGyV/'>
 <div class="wrapper">
    <div class="box box1">Un</div>
@@ Ligne 148 : / Ligne 148 : @@
 .wrapper {
    display: grid;
-   grid-tem</a> by Christophe Ducamp (<a href="https://codepen.io/xtof-party">@xtof-party</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+   grid-tem</a> by Christophe Ducamp (<a href='https://codepen.io/xtof-party'>@xtof-party</a>) on <a href='https://codepen.io'>CodePen</a>.
-<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+</iframe>
 === unité fr ===

← Version précédente		Version du 9 janvier 2018 à 10:50
Ligne 102 :		Ligne 102 :


−	Les ~~_gouttière__s_~~ entre les cellules sont définies à l'aide des propriétés [`grid-column-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-column-gap) et [`grid-row-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-row-gap), ou de la propriété raccourcie [`grid-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-gap). Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.	+	Les ''gouttières'' entre les cellules sont définies à l'aide des propriétés [`grid-column-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-column-gap) et [`grid-row-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-row-gap), ou de la propriété raccourcie [`grid-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-gap). Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

	<p data-height="265" data-theme-id="0" data-slug-hash="opEzyp" data-default-tab="css,result" data-user="xtof-party" data-embed-version="2" data-pen-title="Les gouttières" class="codepen">See the Pen <a href="https://codepen.io/xtof-party/pen/opEzyp/">Les gouttières</a> by Christophe Ducamp (<a href="https://codepen.io/xtof-party">@xtof-party</a>) on <a href="https://codepen.io">CodePen</a>.</p>		<p data-height="265" data-theme-id="0" data-slug-hash="opEzyp" data-default-tab="css,result" data-user="xtof-party" data-embed-version="2" data-pen-title="Les gouttières" class="codepen">See the Pen <a href="https://codepen.io/xtof-party/pen/opEzyp/">Les gouttières</a> by Christophe Ducamp (<a href="https://codepen.io/xtof-party">@xtof-party</a>) on <a href="https://codepen.io">CodePen</a>.</p>

← Version précédente		Version du 9 janvier 2018 à 10:49
Ligne 99 :		Ligne 99 :


		+	==== gouttière ====
		+
		+
		+	Les _gouttière__s_ entre les cellules sont définies à l'aide des propriétés [`grid-column-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-column-gap) et [`grid-row-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-row-gap), ou de la propriété raccourcie [`grid-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-gap). Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.
		+
		+	<p data-height="265" data-theme-id="0" data-slug-hash="opEzyp" data-default-tab="css,result" data-user="xtof-party" data-embed-version="2" data-pen-title="Les gouttières" class="codepen">See the Pen <a href="https://codepen.io/xtof-party/pen/opEzyp/">Les gouttières</a> by Christophe Ducamp (<a href="https://codepen.io/xtof-party">@xtof-party</a>) on <a href="https://codepen.io">CodePen</a>.</p>
		+	<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
		+
		+	L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité `fr`. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.

	== Placement d'un élément ==		== Placement d'un élément ==