Grid

Display a responsive grid with cells.
HTML attributes:
class
Custom attributes:
None available

Containing three Cell of equal size:

1{{< hackcss-grid >}}
2  {{< hackcss-cell class="-4of12" text="4" />}}
3  {{< hackcss-cell class="-4of12" text="4" />}}
4  {{< hackcss-cell class="-4of12" text="4" />}}
5{{< /hackcss-grid >}}
4
4
4

With two columns of odd size:

{{< hackcss-grid >}}
  {{< hackcss-cell class="-4of12" text="4" />}}
  {{< hackcss-cell class="-8of12" text="8" />}}
{{< /hackcss-grid >}}
4
8

With 12 columns:

{{< hackcss-grid >}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
  {{< hackcss-cell class="-1of12" text="1" />}}
{{< /hackcss-grid >}}
1
1
1
1
1
1
1
1
1
1
1
1

Enclosing Cards with various Buttons inside:

{{< hackcss-grid >}}
  {{< hackcss-cell class="-4of12" >}}
    {{< hackcss-card header="Step 1" >}}
      {{< hackcss-button type="primary" isblock="true" isghost="true" >}}
        <svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path>
        </svg>&nbsp;&nbsp;Download
      {{< /hackcss-button >}}
    {{< /hackcss-card >}}
  {{< /hackcss-cell >}}
  {{< hackcss-cell class="-4of12" >}}
    {{< hackcss-card header="Step 2" >}}
      {{< hackcss-button type="info" isblock="true" isghost="true" >}}
        <svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
        </svg>&nbsp;&nbsp;Install
      {{< /hackcss-button >}}
    {{< /hackcss-card >}}
  {{< /hackcss-cell >}}
  {{< hackcss-cell class="-4of12" >}}
    {{< hackcss-card header="Step 3" >}}
      {{< hackcss-button type="success" isblock="true" isghost="true" >}}
        <svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
          <path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
        </svg>&nbsp;&nbsp;Profit
      {{< /hackcss-button >}}
    {{< /hackcss-card >}}
  {{< /hackcss-cell >}}
{{< /hackcss-grid >}}
Step 1
Step 2
Step 3

Aligning three SVG Favicons using -around modifier:

{{< hackcss-grid class="-around" >}}
  {{< hackcss-cell class="-2of12" >}}
    <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E">
  {{< /hackcss-cell >}}
  {{< hackcss-cell class="-2of12" >}}
    <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E">
  {{< /hackcss-cell >}}
  {{< hackcss-cell class="-2of12" >}}
    <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E">
  {{< /hackcss-cell >}}
{{< /hackcss-grid >}}

See the hackcss docs for full list of flexbox modifiers available. Reference the following resources for additional help: