Utilisation de la grille CSS pour les mises en page de style magazine

Table des matières

Le CSS offre une grande polyvalence pour façonner des présentations web captivantes et adaptatives. Un agencement de type magazine, qui combine textes et images de manière visuellement séduisante, est une option prisée pour son impact.

CSS Grid est l’outil idéal pour concevoir ce type de mise en page. Il offre la précision et le contrôle nécessaires. C’est donc une technique essentielle à maîtriser.

Qu’est-ce qu’une mise en page de style magazine ?

Les mises en page de type magazine utilisent une structure en grille pour disposer le contenu en colonnes et en lignes.

Elles sont particulièrement efficaces pour mettre en valeur divers types de contenus tels que des articles, des photos ou des annonces publicitaires, de façon organisée et esthétique.

Appréhender le CSS Grid

Le CSS Grid est un puissant outil de mise en page qui permet de positionner des éléments dans un espace bidimensionnel, facilitant ainsi la création de grilles en colonnes et en lignes.

Ce type d’agencement repose sur deux composantes majeures : le conteneur de grille, qui détermine la structure de la grille, et les éléments de grille, qui sont les enfants du conteneur.

Voici un exemple simple d’utilisation de CSS Grid pour obtenir une grille 3×3 :

 .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}.grid-item {
  background-color: #f76a6a;
  padding: 20px;
}

Ce code définit un conteneur de grille avec trois colonnes de largeur identique, espacées de 20px. Le résultat est une grille régulière.

Organiser la structure HTML

Pour une mise en page de type magazine, un document HTML bien structuré est indispensable. Il est conseillé d’utiliser des balises sémantiques comme <article> et <section> pour structurer le contenu. Voici un point de départ efficace :

 <body>
  <section class="magazine-layout">
    <article>
      <img src="https://source.unsplash.com/random/?city,night" />
      <p>Titre de l'article</p>
    </article>    <article> 
      <img src="https://source.unsplash.com/random/?city,day" />
      <p>Titre de l'article</p>
    </article>
    <article> 
      <img src="https://source.unsplash.com/random/?animal" />
      <p>Titre de l'article</p>
    </article>
    <article>
      <img src="https://source.unsplash.com/random/?book" />
      <p>Titre de l'article</p>
    </article>
    <article>
      <img src="https://source.unsplash.com/random/?food" />
      <p>Titre de l'article</p>
    </article>
  </section>
</body>

Définir le conteneur de grille

Pour établir une grille pour votre mise en page de type magazine, appliquez le CSS suivant :

 .magazine-layout {
  height: 100%;
  max-width: 130rem;
  margin: 0 auto;  
  display: grid;
  
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  
  grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

Ce code CSS indique que l’élément conteneur, .magazine-layout, est une grille grâce à la propriété `display:grid`.

Les propriétés `grid-template-columns` et `grid-template-rows` utilisent une combinaison de `repeat`, `auto-fit`, et `minmax`. Cela permet d’assurer que les colonnes et les lignes ont une taille minimale de 250px et qu’elles s’adaptent pour accueillir autant d’éléments que possible.

Positionner les éléments de grille

Maintenant, mettez en forme chaque article et son contenu pour obtenir des éléments de type vignettes attrayants :

 article {
  overflow: hidden;
  border-radius: 0.5rem;
  position: relative;
  color: #fff;
}.article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 400px;
}
.article p {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2rem;
  background: #333333c1;
  font-size: 2rem;
  border-radius: 0.5rem;
}

À ce stade, votre page web devrait afficher une mise en page de base.

Concevoir des mises en page de style magazine

Pour un rendu authentique de style magazine, ajoutez des styles CSS pour étendre les éléments de l’article selon vos préférences :

 .article:nth-child(1) {
  grid-column: 1 / span 3;
}.article:nth-child(4) {
  grid-column: 2 / span 2;
}

Votre page web devrait maintenant ressembler davantage à un magazine.

Adaptation aux différentes tailles d’écran avec CSS Grid

Un avantage majeur du CSS Grid est sa capacité d’adaptation. Il est possible d’utiliser des requêtes média pour ajuster la mise en page en fonction de la taille de l’écran. Par exemple :

 
@media screen and (max-width: 1100px) {
  .article:nth-child(3) {
    grid-column: 2 / span 2;
  }  .article:nth-child(5) {
    grid-row: 3 / span 1;
  }
}

@media screen and (max-width: 600px) {
  .article:nth-child(2),
  .article:nth-child(3),
  .article:nth-child(4),
  .article:nth-child(5) {
    grid-column: 1 / span 3;
  }
}

Ces requêtes média permettent de modifier la mise en page pour optimiser l’affichage sur divers appareils. Votre mise en page finale sera adaptative.

Optimiser vos mises en page avec CSS Grid

CSS Grid est un outil souple qui permet de concevoir des mises en page de type magazine, qui s’ajustent dynamiquement à différentes tailles d’écran. Il offre la possibilité de définir des structures de grille, de positionner des éléments et de personnaliser l’agencement.

N’hésitez pas à explorer diverses configurations et styles de grille pour obtenir la mise en page parfaite pour votre site web, inspirée des magazines.

0 Partages