Les grids contiennent les cards de différentes tailles et complete la grille déja présente.
Plusieures tailles prédéfinies et exemples sont à votre disposition : 1/4 2/4 3/4 4/4/
Cette grille fonctionne en ajoutant la class o-grid a la grille déja présente o-cardgrid
On peux également ajouté des tableaux a l'interieur des card.
Une class ".responsive-table" est prévu pour les tableaux responsives (a mettre a la suite de ".o-card--X") : une largeur minimal est prévu avec une scrollbar selon la taille d'écran
Pour pouvoir diviser une carte en plusieurs colonnes il faut lui ajouter la class d-grid au niveau du contenu.
La carte sera alors diviser en 14 colonnes. Pour pouvoir ajuster la répartition des colonnes vous avez à diposition les class suivant :
grid-col-x remplacer le x par le nombre de colonnes souhaitées
grid-col-start-x remplacer le x par le numéro de la colonnes
grid-col-end-x remplacer le x par le numéro de la colonnes
Ex : grid-col-6 le contenu occupera 6 colonnes
Ex : grid-col-start-6 le contenu commencera à la 6ème colonne, il faut lui ajouter la class grid-col-end-x pour définir combien de colonnes il occupera
md-grid-col-x remplacer le x par le nombre de colonnes souhaitées
md-grid-col-start-x remplacer le x par le numéro de la colonnes
md-grid-col-end-x remplacer le x par le numéro de la colonnes
Ex : md-grid-col-6 le contenu occupera 6 colonnes à partir de 768px
Ex : md-grid-col-start-6 le contenu commencera à la 6ème colonne à partir de 768px, il faut lui ajouter la class md-grid-col-end-x pour définir combien de colonnes il occupera
lg-grid-col-x remplacer le x par le nombre de colonnes souhaitées
lg-grid-col-start-x remplacer le x par le numéro de la colonnes
lg-grid-col-end-x remplacer le x par le numéro de la colonnes
Ex : lg-grid-col-6 le contenu occupera 6 colonnes à partir de 1200px
Ex : lg-grid-col-start-6 le contenu commencera à la 6ème colonne à partir de 1200px, il faut lui ajouter la class lg-grid-col-end-x pour définir combien de colonnes il occupera
q
<div class="o-cardgrid o-grid">
<div class="o-card--small">
<div class="u-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a dapibus dolor. Etiam a lacus erat. Integer id consequat massa, nec dictum diam. Morbi tincidunt pellentesque augue, et ornare felis dictum sit amet. Cras consequat justo non quam pretium feugiat. Maecenas sit amet odio elit. Nunc sed tortor semper, posuere justo at, blandit felis.</div>
</div>
</div>
<div class="o-cardgrid o-grid">
<div class="o-card--small o-card--double">
<div class="u-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a dapibus dolor. Etiam a lacus erat. Integer id consequat massa, nec dictum diam. Morbi tincidunt pellentesque augue, et ornare felis dictum sit amet. Cras consequat justo non quam pretium feugiat. Maecenas sit amet odio elit. Nunc sed tortor semper, posuere justo at, blandit felis.</div>
</div>
</div>
<div class="o-cardgrid o-grid">
<div class="o-card--small o-card--triple">
<div class="u-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a dapibus dolor. Etiam a lacus erat. Integer id consequat massa, nec dictum diam. Morbi tincidunt pellentesque augue, et ornare felis dictum sit amet. Cras consequat justo non quam pretium feugiat. Maecenas sit amet odio elit. Nunc sed tortor semper, posuere justo at, blandit felis.</div>
</div>
</div>
<div class="o-cardgrid o-grid">
<div class="o-card--small o-card--full">
<div class="u-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a dapibus dolor. Etiam a lacus erat. Integer id consequat massa, nec dictum diam. Morbi tincidunt pellentesque augue, et ornare felis dictum sit amet. Cras consequat justo non quam pretium feugiat. Maecenas sit amet odio elit. Nunc sed tortor semper, posuere justo at, blandit felis.</div>
</div>
</div>
<div class="o-cardgrid o-grid">
<div class="o-card--small">a</div>
<div class="o-card--small">b</div>
<div class="o-card--small">c</div>
<div class="o-card--small">d</div>
<div class="o-card--small o-card--double">e</div>
<div class="o-card--small o-card--double">f</div>
<div class="o-card--small o-card--triple">g</div>
<div class="o-card--small">h</div>
<div class="o-card--small o-card--full">i</div>
</div>
<div class="o-cardgrid o-grid">
<div class="o-card--small o-card--double o-card--doublerow">a</div>
<div class="o-card--small">
<div class="u-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a dapibus dolor. Etiam a lacus erat. Integer id consequat massa, nec dictum diam. Morbi tincidunt pellentesque augue, et ornare felis dictum sit amet. Cras consequat justo non quam pretium feugiat. Maecenas sit amet odio elit. Nunc sed tortor semper, posuere justo at, blandit felis.</div>
</div>
<div class="o-card--small">c</div>
<div class="o-card--small o-card--double">d</div>
</div>
<div class="o-cardgrid o-grid">
<div class="o-card--small o-card--double o-card--doublerow">a</div>
<div class="o-card--small">
<div class="u-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a dapibus dolor. Etiam a lacus erat. Integer id consequat massa, nec dictum diam. Morbi tincidunt pellentesque augue, et ornare felis dictum sit amet. Cras consequat justo non quam pretium feugiat. Maecenas sit amet odio elit. Nunc sed tortor semper, posuere justo at, blandit felis.</div>
</div>
<div class="o-card--small o-card--double">c</div>
</div>
<div class="o-cardgrid o-grid">
<div class="o-card--small">a</div>
<div class="o-card--small o-card--double o-card--doublerow">b</div>
<div class="o-card--small">c</div>
<div class="o-card--small">d</div>
<div class="o-card--small">e</div>
</div>
<div class="o-cardgrid o-grid">
<div class="o-card--small o-card--double">a</div>
<div class="o-card--small o-card--double o-card--doublerow">b</div>
<div class="o-card--small">c</div>
<div class="o-card--small">d</div>
</div>
| Titre line lorem ipsum 0 | Titre line lorem ipsum 1 | Titre line lorem ipsum 2 |
|---|---|---|
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 |
| Titre line lorem ipsum 0 | Titre line lorem ipsum 1 | Titre line lorem ipsum 2 | Titre line lorem ipsum 3 | Titre line lorem ipsum 4 | Titre line lorem ipsum 5 |
|---|---|---|---|---|---|
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 |
| Titre line lorem ipsum 0 | Titre line lorem ipsum 1 | Titre line lorem ipsum 2 | Titre line lorem ipsum 3 | Titre line lorem ipsum 4 | Titre line lorem ipsum 5 | Titre line lorem ipsum 6 | Titre line lorem ipsum 7 | Titre line lorem ipsum 8 |
|---|---|---|---|---|---|---|---|---|
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 |
| Titre line lorem ipsum 0 | Titre line lorem ipsum 1 | Titre line lorem ipsum 2 | Titre line lorem ipsum 3 | Titre line lorem ipsum 4 | Titre line lorem ipsum 5 | Titre line lorem ipsum 6 | Titre line lorem ipsum 7 | Titre line lorem ipsum 8 | Titre line lorem ipsum 9 | Titre line lorem ipsum 10 | Titre line lorem ipsum 11 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 | Text line lorem ipsum 9 | Text line lorem ipsum 10 | Text line lorem ipsum 11 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 | Text line lorem ipsum 9 | Text line lorem ipsum 10 | Text line lorem ipsum 11 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 | Text line lorem ipsum 9 | Text line lorem ipsum 10 | Text line lorem ipsum 11 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 | Text line lorem ipsum 9 | Text line lorem ipsum 10 | Text line lorem ipsum 11 |
| Text line lorem ipsum 0 | Text line lorem ipsum 1 | Text line lorem ipsum 2 | Text line lorem ipsum 3 | Text line lorem ipsum 4 | Text line lorem ipsum 5 | Text line lorem ipsum 6 | Text line lorem ipsum 7 | Text line lorem ipsum 8 | Text line lorem ipsum 9 | Text line lorem ipsum 10 | Text line lorem ipsum 11 |
<div class="o-cardgrid o-grid">
<div class="o-card--small responsive-table">
<div class="o-tab u-tbl--adapt">
<table>
<thead>
<tr>
<th>Titre line lorem ipsum 0</th>
<th>Titre line lorem ipsum 1</th>
<th>Titre line lorem ipsum 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="o-card--small"></div>
<div class="o-card--small o-card--double">
<div class="o-tab u-tbl--adapt">
<table>
<thead>
<tr>
<th>Titre line lorem ipsum 0</th>
<th>Titre line lorem ipsum 1</th>
<th>Titre line lorem ipsum 2</th>
<th>Titre line lorem ipsum 3</th>
<th>Titre line lorem ipsum 4</th>
<th>Titre line lorem ipsum 5</th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="o-card--small o-card--triple">
<div class="o-tab u-tbl--adapt">
<table>
<thead>
<tr>
<th>Titre line lorem ipsum 0</th>
<th>Titre line lorem ipsum 1</th>
<th>Titre line lorem ipsum 2</th>
<th>Titre line lorem ipsum 3</th>
<th>Titre line lorem ipsum 4</th>
<th>Titre line lorem ipsum 5</th>
<th>Titre line lorem ipsum 6</th>
<th>Titre line lorem ipsum 7</th>
<th>Titre line lorem ipsum 8</th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="o-card--small"></div>
<div class="o-card--small o-card--full responsive-table">
<div class="o-tab u-tbl--adapt">
<table>
<thead>
<tr>
<th>Titre line lorem ipsum 0</th>
<th>Titre line lorem ipsum 1</th>
<th>Titre line lorem ipsum 2</th>
<th>Titre line lorem ipsum 3</th>
<th>Titre line lorem ipsum 4</th>
<th>Titre line lorem ipsum 5</th>
<th>Titre line lorem ipsum 6</th>
<th>Titre line lorem ipsum 7</th>
<th>Titre line lorem ipsum 8</th>
<th>Titre line lorem ipsum 9</th>
<th>Titre line lorem ipsum 10</th>
<th>Titre line lorem ipsum 11</th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
<td class="u-text">Text line lorem ipsum 9</td>
<td class="u-text">Text line lorem ipsum 10</td>
<td class="u-text">Text line lorem ipsum 11</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
<td class="u-text">Text line lorem ipsum 9</td>
<td class="u-text">Text line lorem ipsum 10</td>
<td class="u-text">Text line lorem ipsum 11</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
<td class="u-text">Text line lorem ipsum 9</td>
<td class="u-text">Text line lorem ipsum 10</td>
<td class="u-text">Text line lorem ipsum 11</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
<td class="u-text">Text line lorem ipsum 9</td>
<td class="u-text">Text line lorem ipsum 10</td>
<td class="u-text">Text line lorem ipsum 11</td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text">Text line lorem ipsum 8</td>
<td class="u-text">Text line lorem ipsum 9</td>
<td class="u-text">Text line lorem ipsum 10</td>
<td class="u-text">Text line lorem ipsum 11</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="o-card">
<div class="c-card__header">
<div class="u-title--small">Carte avec grille</div>
</div>
<div class="c-card__content">
<div class="d-grid" style="height: 300px;">
<div class="grid-col-6" style="background-color: lavenderblush;">j'occupe 6 colonnes</div>
<div class="grid-col-start-8 grid-col-end-12" style="background-color: salmon;">j'occupe 4 colonnes et je commence à la 8ème</div>
</div>
</div>
</div>