Responsive

cols=

Sets grid-template-columns directly. Apply to any layout="grid" parent.

<div layout="grid" cols="1" gap="md">...</div>  <!-- 1 column  -->
<div layout="grid" cols="2" gap="md">...</div>  <!-- 2 columns -->
<div layout="grid" cols="3" gap="md">...</div>  <!-- 3 columns -->
<div layout="grid" cols="4" gap="md">...</div>  <!-- 4 columns -->
<div layout="grid" cols="auto" gap="md">...</div> <!-- auto-fit -->

Responsive breakpoints

Use sm-cols, md-cols, lg-cols, xl-cols to override the column count at each breakpoint. Resize this window to see them change.

<div layout="grid" cols="1" sm-cols="2" md-cols="3" lg-cols="4" gap="md">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

<!-- Breakpoints:
  sm-cols  ≥ 640px
  md-cols  ≥ 768px
  lg-cols  ≥ 1024px
  xl-cols  ≥ 1280px
-->

span=

Makes an item span multiple columns in a grid. Use span="full" to span all columns.

<div layout="grid" cols="12" gap="sm">
  <div span="full">Full width (12 cols)</div>
  <div span="6">Half (6)</div>
  <div span="6">Half (6)</div>
  <div span="4">Third (4)</div>
  <div span="4">Third (4)</div>
  <div span="4">Third (4)</div>
</div>

hide= / show=

Conditionally hide or show elements at specific breakpoints. Resize to observe.

<!-- Hidden on mobile (< 640px) -->
<div hide="mobile">Hidden on mobile</div>

<!-- Hidden on desktop (≥ 1024px) -->
<div hide="desktop">Hidden on desktop</div>

<!-- Only visible on mobile -->
<div show="mobile">Only on mobile</div>

<!-- Only visible on desktop -->
<div show="desktop">Only on desktop</div>

<!-- Breakpoints:
  mobile   < 640px
  tablet   640px – 1023px
  desktop  ≥ 1024px
-->