【CSS】FlexboxグリッドシステムsGrid

sGridはフレキシボックスのグリッドシステム。

Grid examples

<div class="my-custom-class-for-grid">
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto sed, rerum ratione at modi sunt!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet.
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet.
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet.
</div>
</div>

Grid with different cells

<div class="my-custom-class-for-grid2">
<div class="my-custom-class-for-grid-cell2 type1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="my-custom-class-for-grid-cell2 type1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quaerat officiis doloribus commodi totam molestiae, maxime id, nisi sit veniam ipsam quam accusantium, quo iusto voluptatibus sequi. Quibusdam perspiciatis, dolor.
</div>
<div class="my-custom-class-for-grid-cell2 type2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="my-custom-class-for-grid-cell2 type3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto sed, rerum ratione at modi sunt!
</div>
<div class="my-custom-class-for-grid-cell2 type4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure distinctio, assumenda, molestias culpa ad debitis qui odio quidem at, dolore nobis dolorem minus ea! Aspernatur minus commodi, tempora optio consequatur temporibus placeat perferendis possimus est veniam corrupti eum atque tempore dignissimos illum totam fuga error ea. Explicabo impedit, temporibus totam.
</div>
<div class="my-custom-class-for-grid-cell2 type5">
Lorem ipsum dolor sit amet.
</div>
<div class="my-custom-class-for-grid-cell2 type6">
Lorem ipsum dolor sit amet.
</div>
<div class="my-custom-class-for-grid-cell2 type7">
Lorem ipsum dolor sit amet.
</div>
</div>
 
sGrid

【CSS】FlexboxグリッドシステムsGrid

  • LATEST
  • RELATED
  • POPULAR