California Design System

CA-grid

CSS-grid is a tool that helps you create layouts for webpages. It allows you to divide a webpage into rows and columns and place content exactly where you want it to go.

Why use CSS grid

  • Responsiveness: It’s easy to make responsive layouts that adjust for different screen sizes.
  • Preciseness: It gives you precise control over where things go.
  • Scalable: It works well with other layout tools like Flexbox.

Anatomy

Just a reminder we’ve adopted the TAC (tag, attribute, class) CSS methodology. So, you may notice a few custom HTML tags in the Eureka Design System. The ca-grid is one of those custom tags.

  1. ca-layout is used as the parent building block for our grid-template-layouts, Eureka, Horizon, and Skyline.
  2. ca-grid is the parent tag where a grid is created. Think of it as the box that holds your grid. The rest is CSS at work. Enjoy!
  3. grid-template-areas identify the placement of the areas in your grid using names (e.g., A, B, C, or header, aside, main, footer).
  4. grid-template-columns define the sizing of the grid-columns.
  5. grid-template-rows define the sizing of the grid-rows.
  6. column-gap applies space between the grid-columns.
  7. row-gap applies space between the grid-rows.

In-page ca-grid layouts

If you use an in-page ca-grid layout you can have as many as six columns in your grid or a few as one.

You may also have as many rows as you need to accomplish your layout needs.

Live demo

Max six columns (default)

Stretch your browser window.

The grid is responsive to your viewport size.

Cell three.

Cell four.

Cell five.

Cell six.

Max three columns

Add the attribute max-col="3" to your ca-grid tag.

Cell one.

Cell two.

Cell three.

Cell four.

Cell five.

Cell six.

Same three-column grid with div

Add the CSS classes .grid and .grid-max-col-3

Cell one.

Cell two.

Cell three.

Cell four.

Cell five.

Cell six.

Developer notes

Tags, attributes, classes Description
ca-layout Custom tag that contains our grid-templte-areas.
ca-grid Custom HTML in-page grid tag for Eureka Design System.
any-block-element Use any combination of HTML block elements to set up an in-page grid layout.
ca-grid-max-col-numericalValue Maximum of 6 columns.
ca-grid-min-col-numericalValue Minimum of 1 column.
ca-grid-span-numericalValue Sets an @container query for creating your own column span.
data-max-col="numericalValue" Sets maximum number of columns on the grid.
data-min-col="numericalValue" Sets minimum number of columns on the grid.
data-cell-size="large" Cell size shortcut.
data-flow="fit" Change the fit style of the grid columns, like auto-fit.
data-flow="fill" Change the fill style of the grid columns auto-fill.
.grid Custom HTML grid class for Eureka Design System.

Accessibility

CSS-grid is inherently responsive and keyboard accessiblle. Visit W3C draft documentation on Re-ordering and the accessibility of your grid.

Changelog

Date Version Affects Notes
MM/DD/YYYY 0.0.0.0 Something This is the first release.