CATALOGUE Code & Data Formation XHTML/CSS Maîtriser Materialize CSS Comprendre et Utiliser le Système de Grilles de Materialize CSS

Comprendre et Utiliser le Système de Grilles de Materialize CSS

La grille de material design
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtriser Materialize CSS
Revoir le teaser Je m'abonne
Transcription
49,90€ 29,94€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
49,90€ 29,94€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction au Système de Grilles

Objectifs

Les objectifs de cette vidéo sont :
- Comprendre le fonctionnement du système de grilles de Materialize CSS
- Apprendre à créer des mises en page responsives
- Maîtriser l'usage des classes Container, Row, et Col
- Savoir adapter la mise en page aux différentes tailles d'écran.

Résumé

Dans cette leçon, découvrez comment utiliser le système de grilles proposé par Materialize CSS pour concevoir des mises en page web responsives et efficacement organisées.

Description

Nous allons commencer cette formation sur Materialize CSS en abordant le système de grilles qu'utilise le framework. En effet, à l'instar de tous les frameworks CSS du marché, Materialize implémente une grille de 12 cases, c'est-à-dire que la surface de notre page web est divisée en 12 éléments égaux. L'utilisation de cette grille garantit la responsivité de notre site internet et permet d'organiser le contenu selon nos besoins.

Nous illustrons ce principe par un exemple pratique où nous créons 12 div numérotées de 1 à 12, puis appliquons des styles CSS pour mieux visualiser ces divisions. Nous explorons également la notion de conteneur pour la centration du contenu, et les lignes (row) pour structurer les éléments les uns au-dessous des autres. Enfin, les tailles d'écran (S, M, L) sont décrites pour adapter notre mise en page aux différents périphériques.

Voir plus

Questions fréquentes

Qu'est-ce que la grille de 12 cases de Materialize CSS ?
La grille de 12 cases de Materialize CSS est un système de mise en page qui divise la surface de la page web en 12 colonnes de largeur égale, permettant ainsi une organisation flexible et responsive du contenu.
Comment les classes M, S et L influencent-elles la mise en page ?
Les classes M, S et L définissent la répartition des colonnes selon trois points de rupture : les écrans moyens (M) > 600px, les écrans petits (S) < 600px, et les écrans larges (L) > 992px. Cela permet d'adapter la mise en page aux différentes tailles d'écran.
Quel est le rôle de la classe 'container' dans Materialize CSS?
La classe 'container' dans Materialize CSS limite la largeur utile de la mise en page à 70% de l'écran et centre le contenu horizontalement, ce qui est essentiel pour maintenir une disposition uniforme et claire sur différentes tailles d'écran.