Pour accéder à votre tableau de bord :

Connectez-vous

Connexion S'inscrire

Connexion

Organisme de formation N°11 91 07318 91
Mon compte Statut
Logo NosyWeb
Réussir sur Internet
Marketing Digital - Google - Joomla

Depuis l’annonce de Joomla concernant l’adoption de CSS Grid dans Joomla 4, de nombreux développeurs ont manifesté leur intérêt pour CSS Grid.

Dans un précédent article, nous avons abordé les bases du CSS Grid.

Dans cet article, nous allons examiner de plus près la propriété Autoflow de CSS Grid.

Vous savez déjà que les éléments de la grille sont placés dans la grille de manière explicite via un algorithme, au cas où vous n'auriez pas défini suffisamment de lignes pour placer les éléments.

Regardons un exemple.

Le code HTML

  • Ouvrez l'éditeur de texte de votre choix.
  • Créez un fichier HTML.
  • Si l'extension Emmet est installée dans votre éditeur, vous pouvez taper ce code :
.container>.item{$}*6
  • Appuyez sur la touche "Tab".
  • Si l'extension Emmet n'est pas installée, copiez et collez ce code :
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>

Le code CSS

  • Créez un fichier CSS et liez-le à votre fichier HTML
  • Ajoutez les styles globaux suivants :
/* GLOBAL STYLES */
* {
box-sizing: border-box;
} body {
background-color: #AAA;
margin: 50px;
} /* Each item in the grid contains numbers */ .item {/* Center the contents of the grid items. Making each grid item a Flex Container */
display: flex; /* Horizontal and Vertical centering */
justify-content: center;
align-items: center;
border: 5px solid #87b5ff;
border-radius: 3px;
font-size: 2em;
font-family: sans-serif;
font-weight: bold;
background-color: #1c57b5;
}

Maintenant, regardons ce que cela donne dans votre navigateur. Ouvrez le fichier HTML. La page devrait ressembler à l'image ci-dessous :

Image 0

Les styles de grille

Pour déclarer l'élément .container en tant que conteneur de grille, ajoutez le code suivant à votre fichier CSS :

.container
{
display: grid;
width: 900px;
grid-gap: 15px;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 75px 75px;

Le conteneur aura une largeur de 900px. Chaque colonne aura une largeur de 200px. Chaque ligne déclarée aura une hauteur de 75px.

Il y aura un écart entre les colonnes et les lignes de 15px. La grille ressemble maintenant à ceci :

Image 1

Ouvrez l'inspecteur de code de votre navigateur et sélectionnez le conteneur de grille

Image 2

Vous pouvez voir par la ligne continue entourant tous les éléments de la grille, que tous ces éléments sont placés dans la grille explicite.

  • Ajouter 3 éléments supplémentaires à la structure HTML
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>

Les éléments 1 à 8 sont placés dans la grille explicite, celle qui a été déclarée.

L'élément 9 a été placé dans la grille implicite. Vous pouvez le voir grâce à la ligne en pointillée affichée par votre inspecteur de code.

Image 3

Cela signifie que le navigateur a placé cet élément dans la grille à l'aide d'un algorithme de placement.

Le flux de cette grille est basé sur les lignes, car les éléments sont acheminés vers la ligne suivante lorsqu'il n'y a plus d'espace disponible.

C'est le comportement par défaut de CSS Grid. Les éléments circulent de gauche à droite et se terminent dans la rangée suivante, comme dans les langues occidentales.

Image 4

La propriété grid-auto-flow

La propriété grid-auto-flow vous permettra de placer les éléments de la grille dans un flux basé sur les colonnes.

Ajoutez cette ligne à votre fichier CSS, enregistrez et observez le résultat dans votre navigateur :

.container
{
display: grid;
width: 900px;
grid-gap: 15px;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 75px 75px;
grid-auto-flow: column;
}

Le flux de la grille est maintenant basé sur les colonnes. L'élément 9 est toujours dans la grille implicite, mais il a été ajouté à la colonne suivante au lieu d'être ajouté à la ligne suivante.

Nous n'avons pas déclaré de largeur pour cette colonne. Cela signifie qu'elle aura une largeur définie automatiquement.

Image 5

Attribuez à cet élément la même largeur que les autres éléments avec la propriété grid-auto-columns :

.container
display: grid;
width: 900px;
grid-gap: 15px;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 75px 75px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}

Chaque nouvelle colonne aura désormais une largeur de 200px.

Image 6

Défilement horizontal

Comme vous l’avez déjà remarqué, nous utilisons des unités fixes (px) dans cette grille.

Cela signifie que si vous continuez à ajouter des éléments de grille au conteneur, vous obtiendrez un effet de défilement horizontal sur votre écran.

Portez une attention particulière au dimensionnement des éléments de la grille si vous ne souhaitez pas que cela se produise.

Bien entendu, vous pouvez imaginer une utilisation pratique de cet effet, par exemple, une très longue chronologie horizontale.

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>

Image 7

Il existe d'autres moyens de déclarer la largeur des colonnes, notamment avec des valeurs relatives (l'unité fr), mais nous verrons cela dans un autre tutoriel.

Vous venez d'apprendre à placer des éléments dans une grille basée sur une distribution par colonne à l'aide de la propriété CSS grid-auto-flow.

Testez cette fonctionnalité, jouez avec les balises et les styles et laissez-nous vos commentaires ci-dessous.

Cet article est une libre traduction de How to Use the Autoflow Property in CSS Grid par Jorge Montoya pour Joomlashack.

Cet article vous a plu ? Abonnez-vous à la newsletter NosyWeb !


L'auteur : un expert à votre service
Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis l'avènement de la version 1.5 de Joomla! pour le marketing digital, je mets mon expertise au service des professionnels. A la recherche d'une stratégie digitale avec ou sans le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-moi via https://www.jeancharlesgautard.com

Articles qui devraient vous intéresser

Arrondir les bords d'une image avec Photoshop CS4 Arrondir les bords d'une image avec Photoshop CS4
Le principe est d'arrondir les bords d'une image qui à l'origine se présente donc sous la forme d'un rectangle...
Les brushes avec Photoshop CS4 Les brushes avec Photoshop CS4
Pour inaugurer cette nouvelle catégorie de Nosyweb, je voudrais vous parler des brushes (ou brosses en français...

Ajouter un commentaire
  • Aucun commentaire trouvé
Assistance

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

×

 

Restez à l'affut de l'actualité NosyWeb ! :-)

×
Dernier article sur la même thématique
Tout ce dont les utilisateurs de Joomla ont besoin pour commencer à utiliser CSS GridTout ce dont les utilisateurs de Joomla ont besoin pour commencer à utiliser CSS Grid
L'un des changements majeurs dans le futur Joomla 4 est l'adoption de CSS Grid.  CSS Grid révolutionne l'industrie de la conception de sites web et va rapidement devenir une norme sur...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok