Joran design system

Grid: Default 

<div class="o-grid">
    <div>
        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>
        <figure class="c-figure">

            <img class="c-figure__media" src="https://source.unsplash.com/QDHhz4lPnkU" alt="Des basket et des fleurs" srcset="https://source.unsplash.com/QDHhz4lPnkU/320x210 320w,https://source.unsplash.com/QDHhz4lPnkU/540x360 540w,https://source.unsplash.com/QDHhz4lPnkU/720x480 720w,https://source.unsplash.com/QDHhz4lPnkU/960x640 960w,https://source.unsplash.com/QDHhz4lPnkU/1140x760 1140w,">

            <figcaption class="c-figure__caption">
                This is the caption
            </figcaption>
        </figure>

    </div>
    <div>
        <figure class="c-figure">

            <img class="c-figure__media" src="https://source.unsplash.com/QDHhz4lPnkU" alt="Des basket et des fleurs" srcset="https://source.unsplash.com/QDHhz4lPnkU/320x210 320w,https://source.unsplash.com/QDHhz4lPnkU/540x360 540w,https://source.unsplash.com/QDHhz4lPnkU/720x480 720w,https://source.unsplash.com/QDHhz4lPnkU/960x640 960w,https://source.unsplash.com/QDHhz4lPnkU/1140x760 1140w,">

            <figcaption class="c-figure__caption">
                This is the caption
            </figcaption>
        </figure>

    </div>
    <div>
        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>
        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>
        {% render '@figure' %}
    </div>
    <div>
        {% render '@figure' %}
    </div>
    <div>
        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. */
  • Content: 
    /* ======================================================================
   # _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
  ;
}
  • URL: /components/raw/grid/_objects.grid.css
  • Filesystem Path: src/components/03-Objects/grid/_objects.grid.css
  • Size: 673 Bytes

Grid

Permet d’afficher du contenu sur deux colonnes.

Variantes

Pushed

Le contenu s’affiche à droite sur desktop

Centered

Permet de centrer le contenu verticalement. Peut être utiliser avec une combinaison texte et image.

Reversed

Permet d’inverser les colonne gauche et droite sur desktop alors que sur mobile l’ordre est respecté.