+++ title = "Grid" description = "Display a responsive grid with cells." categories = ["experience"] tags = [] html_attributes = ["class"] custom_attributes = [] snippets_used = ["cell", "card", "button"] [[copyright]] owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++ Containing three [Cell](../cell) of equal size: {{< highlight html "linenos=inline" >}} {{}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-4of12" text="4" />}} {{< /hackcss-grid */>}} {{< /highlight >}} {{< hackcss-grid class="unset-margin" >}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-4of12" text="4" />}} {{< /hackcss-grid >}} With two columns of odd size: ```html {{}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-8of12" text="8" />}} {{< /hackcss-grid */>}} ``` {{< hackcss-grid class="example" >}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-8of12" text="8" />}} {{< /hackcss-grid >}} With 12 columns: ```html {{}} {{< 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 */>}} ``` {{< 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 >}} Enclosing [Cards](../card/) with various [Buttons](../button/) inside: ```html {{}} {{< hackcss-cell class="-4of12" >}} {{< hackcss-card header="Step 1" >}} {{< hackcss-button type="primary" isblock="true" isghost="true" >}} Download {{< /hackcss-button >}} {{< /hackcss-card >}} {{< /hackcss-cell >}} {{< hackcss-cell class="-4of12" >}} {{< hackcss-card header="Step 2" >}} {{< hackcss-button type="info" isblock="true" isghost="true" >}} Install {{< /hackcss-button >}} {{< /hackcss-card >}} {{< /hackcss-cell >}} {{< hackcss-cell class="-4of12" >}} {{< hackcss-card header="Step 3" >}} {{< hackcss-button type="success" isblock="true" isghost="true" >}} Profit {{< /hackcss-button >}} {{< /hackcss-card >}} {{< /hackcss-cell >}} {{< /hackcss-grid */>}} ``` {{< hackcss-grid >}} {{< hackcss-cell class="-4of12" >}} {{< hackcss-card header="Step 1" >}} {{< hackcss-button type="primary" isblock="true" isghost="true" >}} Download {{< /hackcss-button >}} {{< /hackcss-card >}} {{< /hackcss-cell >}} {{< hackcss-cell class="-4of12" >}} {{< hackcss-card header="Step 2" >}} {{< hackcss-button type="info" isblock="true" isghost="true" >}} Install {{< /hackcss-button >}} {{< /hackcss-card >}} {{< /hackcss-cell >}} {{< hackcss-cell class="-4of12" >}} {{< hackcss-card header="Step 3" >}} {{< hackcss-button type="success" isblock="true" isghost="true" >}} Profit {{< /hackcss-button >}} {{< /hackcss-card >}} {{< /hackcss-cell >}} {{< /hackcss-grid >}} Aligning three [SVG Favicons]({{< relref "svg-favicon" >}}) using `-around` modifier: ```html {{}} {{< hackcss-cell class="-2of12" >}}

{{< /hackcss-cell >}} {{< /hackcss-grid */>}} ``` {{< hackcss-grid class="-around" >}} {{< hackcss-cell class="-2of12" >}}

{{< /hackcss-cell >}} {{< /hackcss-grid >}} See the {{< external text="hackcss" href="https://hackcss.egoist.moe/" />}} docs for full list of flexbox modifiers available. Reference the following resources for additional help: - {{< external "https://philipwalton.github.io/solved-by-flexbox/" "Solved by Flexbox" />}} for cleaner, hack-free CSS - {{< external "https://www.w3.org/TR/css-flexbox-1/" "CSS Flexible Box Layout Module" />}} for Level 1 spec on W3C