NibCSS

2 · Layout with flexbox and grid

Lesson 2 of 8 — build a navbar, a centred hero and a card grid with flexbox and CSS grid.

2 min readv1

Layout is where NibCSS saves the most time: the whole structure of a component is readable in its markup.

You will learn: d=flex and d=grid · spacing with g · alignment with jsc and ali · responsive columns with repeat(auto-fit, …).

A navbar with flexbox#

HTML
<nav nib="d=flex; ali=center; jsc=space-between; g=16px; w=100%; mnw=320px; p=12px 20px; bdrd=12px; bgc=#fff; cl=#0f172a; bd=1px solid #e2e8f0; dark:bgc=#0f172a; dark:cl=#e2e8f0; dark:bd=1px solid #1e293b">
  <strong nib="fts=18px">Acme</strong>
  <div nib="d=flex; g=20px; fts=14px; cl=#475569">
    <a nib="cl=inherit; txd=none; hover:cl=#4F52D9" href="#">Docs</a>
    <a nib="cl=inherit; txd=none; hover:cl=#4F52D9" href="#">Pricing</a>
    <a nib="cl=inherit; txd=none; hover:cl=#4F52D9" href="#">Blog</a>
  </div>
</nav>

Rule

Meaning

d=flex

display: flex — children sit in a row

ali=center

align-items: center — vertically centred

jsc=space-between

justify-content — logo left, links right

g=16px

gap — space between children, no margins needed

flxd=column turns the row into a column; flxw=wrap lets items wrap.

Centring anything#

The classic question has a two-rule answer on the parent:

HTML
Perfectly centred 
<div nib="d=grid; pli=center; w=100%; mnw=280px; h=160px; bdrd=12px; bgc=#EEEFFE; dark:bgc=#1e1b4b">
  <span nib="p=8px 14px; bdrd=999px; bgc=#4F52D9; cl=#fff; ftw=600">Perfectly centred</span>
</div>

pli=center is place-items: center — horizontal and vertical at once.

A card grid that adapts without media queries#

HTML
Fast
Typed
Portable
Tiny
<div nib="d=grid; gtc=repeat(auto-fit, minmax(160px, 1fr)); g=12px; w=100%; mnw=320px">
  <div nib="p=16px; bdrd=12px; bgc=#fff; cl=#0f172a; bd=1px solid #e2e8f0; dark:bgc=#0f172a; dark:cl=#e2e8f0; dark:bd=1px solid #1e293b">Fast</div>
  <div nib="p=16px; bdrd=12px; bgc=#fff; cl=#0f172a; bd=1px solid #e2e8f0; dark:bgc=#0f172a; dark:cl=#e2e8f0; dark:bd=1px solid #1e293b">Typed</div>
  <div nib="p=16px; bdrd=12px; bgc=#fff; cl=#0f172a; bd=1px solid #e2e8f0; dark:bgc=#0f172a; dark:cl=#e2e8f0; dark:bd=1px solid #1e293b">Portable</div>
  <div nib="p=16px; bdrd=12px; bgc=#fff; cl=#0f172a; bd=1px solid #e2e8f0; dark:bgc=#0f172a; dark:cl=#e2e8f0; dark:bd=1px solid #1e293b">Tiny</div>
</div>

gtc=repeat(auto-fit, minmax(160px, 1fr)) creates as many columns as fit, each at least 160px wide. Resize the window: the grid reflows from four columns to one on its own.

A fixed sidebar and a fluid content area:

HTML
<div nib="d=grid; gtc=240px 1fr; mnh=100vh">
  <aside nib="p=20px; bdr=1px solid #e2e8f0">Sidebar</aside>
  <main nib="p=32px; mnw=0">Content</main>
</div>

Exercise#

Build a pricing row: three cards side by side on wide screens, stacked on narrow ones, the middle one highlighted with a border in #4F52D9. (Hint: auto-fit does the stacking.)

Next steps#