<div class="o-grid">
<div class="o-grid__item--pushed">
Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents.
</div>
</div>
<div class="o-grid">
<div class="o-grid__item--pushed">
Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents.
</div>
</div>
/* No context defined. */
/* ======================================================================
# _objects.grid-css
====================================================================== */
.o-grid {
@apply
grid
gap-4
md:grid-cols-2
print:grid-cols-2
;
@extend .u-break-inside-avoid;
}
/* -----------------------------------
# Items
----------------------------------- */
.o-grid__item--self-center {
@apply
self-center
;
}
@screen md {
.o-grid__item--left {
grid-column: 1;
grid-row: 1;
}
.o-grid__item--right {
grid-column: 2;
grid-row: 1;
}
}
.o-grid__item--pushed {
@apply
md:col-start-2
print:col-start-2
;
}
Permet d’afficher du contenu sur deux colonnes.
Le contenu s’affiche à droite sur desktop
Permet de centrer le contenu verticalement. Peut être utiliser avec une combinaison texte et image.
Permet d’inverser les colonne gauche et droite sur desktop alors que sur mobile l’ordre est respecté.