DF-CSS Columns

DF-CSS >> DF-CSS Columns

Concepts de base

Ce framework CSS :

• Permet une mise en page par colonnes facile et compatible avec Divi
• Est mobile First
• Gère les breakpoints (sm / md / lg / xl / xxl) - voir DF-CSS Breakpoints
• Permet de gérer des padding entre les colonnes
• Permet l'utilisation de rows/cols en cascade (ex: des colonnes dans des colonnes)
• Peut être utilisé avec ou sans divi
• Utilise Flex pour toutes les mise en page en colonnes

Row & Colonnes Responsives

Exemple simple 1 Row / 4 colonnes reponsives

• En mode téléphone : 4 lignes de 100%
• En mode tablette : 2 lignes de 2 colonnes (50%)
• En mode Desktop: 1 ligne de 4 colonnes (25%)

Cas en utilisant les largeurs des colonnes

<div class="df-row">
  <div class="df-md-col-50 df-lg-col-25"></div>
  <div class="df-md-col-50 df-lg-col-25"></div>
  <div class="df-md-col-50 df-lg-col-25"></div>
  <div class="df-md-col-50 df-lg-col-25"></div>
</div>

Cas en utilisant le nombre de colonnes

<div class="df-row df-md-cols-2 df-lg-cols-4">
  <div class="df-col"></div>
  <div class="df-col"></div>
  <div class="df-col"></div>
  <div class="df-col"></div>
</div>