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>

Cas en utilisant les colonnes de Divi

<div class="df-row">
  <div class="et_pb_column_1_4 df-md-col-50">...</div>
  <div class="et_pb_column_1_2 df-md-col-50">...</div>
  <div class="et_pb_column_1_4 df-md-col-50">...</div>
</div>

Row & Colonnes Responsives

df-{breakpoint}-col-{width}

Breakpoints : sm / md / lg / xl / xxl

Largeurs supportées :

• df-col-10  : 10%
• df-col-16  : 16.667% (1/6)
• df-col-20  : 20% (1/5)
• df-col-25  : 25% (1/4)
• df-col-30  : 30%
• df-col-33  : 33.333% (1/3)
• df-col-40  : 40%
• df-col-50  : 50% (1/2)
• df-col-60  : 60%
• df-col-66  : 66.667% (2/3)
• df-col-75  : 75% (3/4)
• df-col-80  : 80%
• df-col-90  : 90%
• df-col-100 : 100%