Creating stable container layouts

Container units are a specialized collection of CSS variables which allow you to use columns and gutters to create grids, layouts, and components. They mirror the layout features found in UI design software, where configuring only three values provides a global collection of columns and gutters for measuring and calculating from your text.

They even have clear widths everywhere in your text — irrespective of their nesting size, the width of their parents or their sibling components. And instead of having a repeated collection of parent elements from.grid and.row, container units calculate from the document's: root — just like using a rem unit.

What makes Different Container Units?

Grids from common frameworks (such as Bootstrap or Bulma) share the same fundamental limitation: they depend on relative units to construct columns and gutters, such as 'percentages.'

This method ties developers to use a particular HTML structure if they choose to use such dimensions and allows parent > child nesting to determine the widths correctly.

Unconvinced? Try it out for yourself:

Open a grid demo on any CSS framework;

Inspect a column and take note of its width;

Drag the item elsewhere in the text, using DevTools;

Note that the width of the column changed while in transit

Freedom Of Movement

Container units make you more free use of a collection of global units to scale the components. If you want to build a sidebar that is the width of three columns, all you need is:

.sidebar {
 width: calc(3 * var(--column-unit));
 /* or columns(3) */
}

The ... class="front bar "> ... Component can live anywhere within your document — without unique parent or nesting elements.

Tool-sharing with designers

Designers and developers have an excellent middle ground that helps to turn the models from design software into frontend: numbers.

Modular scales are remarkable not only because they help designers put their typography into harmony, but also because developers are able to reproduce them as a simple method. The same applies to Baseline Grids: excellent, self-documentation systems with tiny configuration (one root number) and huge consistency;

Container units are designed in the same way that designers configure the Layout Settings using Sketch:

Start Construction with Container Units

:root {
 --grid-width: 960;
 --grid-column-width: 60;
 --grid-columns: 12;
}

Those three values determine how large a column is relative to your grid. For the above illustration the width of a column is 60/960. Gutters are automatically measured from the residual space.

Finally, set your container width to:

:root {
 --container-width: 84vw;
}

Note: To set the —container-width as an absolute unit. I suggest to use viewport units or rems.

At any breakpoint you can change your —container-width (all your container units must adjust accordingly):

@media (min-width: 800px) {
 --container-width: 90vw;
}
@media (min-width: 1200px) {
 --container-width: 85vw;
}
/* what about max-width? */
@media (min-width: 1400px) {
 --container-width: 1200px;
}

Now you have unlocked two very robust units from which to build:

--column-unit
--gutter-unit

Spans Column: Third And Final Gun

Column spans are easy to measure but not very beautiful to write. I would recommend using a preprocessor for spanning the columns:

.panel {
 /* vanilla css */
 width: calc(6 * var(--column-and-gutter-unit) - var(--gutter-unit));
 
 /* pre-processor shortcut */
 width: column-spans(6); 
}

You can of course use pre-processor shortcuts for every container unit I have listed so far. Let's put them to the test with an example of the design.

Take The Code

CSS: css-container.css

SCSS: container-units-css-fuctions.scss functions

Demos and Recording: Container units

Why use variables in CSS?

This example demonstrates how to re-compile any reference to an SASS / LESS variable if the variable changes — duplicating code for each instance over and over again.

But with the browser, CSS variables share their logic, so browsers will do the update for you.

This definition helps to shape the logic of container units; each entity in your document watches those values as they change, and reacts accordingly by storing logic once at the center.

As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!

This article is contributed by Ujjainee. She is currently pursuing a Bachelor of Technology in Computer Science . She likes most about Computer Engineering is that it allows her to learn and be creative. Also, She believes in sharing knowledge hence is very fond of writing technical contents for the same. Coding, analyzing and blogging are things which She can keep on doing!!