Using Flexbox and Grid for Everything: the Power Tools for Web Design

—

,

Margins and The Early Web

In the early days of the web, CSS was invented to design documents. A lot of the early CSS features revolved around styling text, paragraphs, images, tables, margins, borders, padding and other basic features similar to a word processor. These are good enough for documents, articles, and blog posts which filled most of the web back in the day. Most of these limitations affected how developers built websites for many years such as using “clearfix” and table-based layouts.

Modern CSS can be used to build more complicated designs such as webapps which is far from designing a simple document. New CSS features such as flexboxes and grids help developers create more complex layouts that can be used for modern webapps.

Margins are a great example of a feature that worked pretty well in the past but now has it’s limits for modern design. They were used to extend the border area of an element to include an area used to separate the element from its neighbors. When used together with other elements that also have margins, a behavior called margin collapsing occurs. Top and bottom margins of blocks are sometimes combined into a single margin. Basically a gap but before gap was invented.

Only vertical margins collapse. CSS wasn’t first intended to be used for layouts. It was meant for headings and paragraphs, not columns and sidebars. Nearly all documents flowed in the vertical direction so the people in charge of the CSS spec didn’t see the need to add support for horizontal margin collapse.

Other things to know:

  1. Margin collapse only happens in the block-direction.
  2. Margin collapse won’t work when using flexboxes or grids on the parent container.
  3. Largest margin “wins”.
  4. Margins can collapse even when they aren’t from sibling elements.
  5. Negative margin also collapse.

Margins may not be so useful anymore with the new CSS property called gap. This was added in 2017 and can be used in a grid layout. In 2020 to 2021, gap for flexboxes became widely available across major browsers. When using flexboxes or grids on parents, child elements cannot take advantage of margin collapse if all elements have margins around them to get space between each other.

So what now? Now that both flexboxes and grids support gap, is there still a reason to use margin to add space between sibling elements? Should developers continue using margin or transition to using gap in everything they do?

The top and bottom margins of a single box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.

– Incomplete List of Mistakes in the Design of CSS by CSS Working Group

Using Gap and Padding is the Way

Margin breaks component encapsulation. An element should not affect anything outside it’s own visual boundaries. Instead of the children using margins, the parent element uses padding to add space between the parent and child element as well as gaps to add space between child elements. The parent affects the child and not the other way around. The behavior is one way. It’s simple to have rules that affect the immediate element and it’s children. Margin affects space around an element, which affects the parents, which breaks this. Less things to think and worry about if it’s all one way.

Another advantage is the splitting of tasks. Margins can handle both space between parent and child as well as space between other child elements. This is assuming the parent isn’t a flexbox or grid. The tasks can be divided into two. Padding controls space between parent and child while gap controls space between child elements. This makes it easier to have different spaces for padding and gaps. Although it may possible with margins, a parent with padding: 2rem; gap: 1rem is easier than all children having this to do the same thing.

CSS
.parent {
	padding: 2rem;
	gap: 1rem;
}
CSS

vs.

CSS
.child {
	margin: 1rem 2rem;
}

.child:first-child {
	margin-top: 2rem;
}

.child:last-child {
	margin-bottom: 2rem;
}
CSS

CSS Reset and Box Sizing

To use flexboxes and grids to it’s full potential, it’s best to do a CSS reset to get things out of the way. Set padding and margin for all elements to 0 so that the default ones found in some elements won’t affect the layouts in the project. If developers don’t define all the default CSS parameters in a project, the browser will use its default. Different browsers have different defaults which will render a different design based on what browser a user has.

However, be warned that having a CSS reset requires that developers make sure the content is readable with new rules. For example, a <p> tag contains a default margin around text so that it’s not too close to other paragraphs to make it more readable. By removing this with the CSS reset, make sure that gap is being utilized to bring back the space between the two groups of text. This may end up giving more work than sticking to the default at times but it’s part of going all the way in a flexbox and grid only design. There are times that this may be ignored for elements that won’t be taking full advantage of flexboxes and grids.

By default in the CSS box model, the width and height that is assigned to an element is only applied to that element’s content box. Margins, paddings, and borders gets added on top of the width and height. Box sizing should be set to border-box to avoid this issue. This sets the calculation of width and height to also contain margin, padding, and border. This still leaves out pseudo elements so set the before and after too.

In the end the universal rules look like this:

CSS
*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
CSS

Using this box-sizing type is recommended to be the default in the Incomplete List of Mistakes in the Design of CSS.

Box-sizing should be border-box by default

– CSS Working Group

Flexboxes and Grids for Everything

From the very start to the end, everything should either be a flexbox or a grid. None of these should have margins. Space between parent and children should be controlled by padding and space between similar elements use gap

Rules:

  1. Use either flex or grid
  2. Use padding for space between parent and children
  3. Use gap for distance between children

Leveraging CSS Variables for Scalable Design

When the project scales, using variables can help with making a standard of all the spaces found in the designs. Write the variables once and just re-use them all over the site. This makes it easier to implement a design with a spatial system – a set of rules for how to measure, size, and space a project’s elements. Variables can be used in a system that uses margins but it would be harder to read for developers.

Gaps bring us closer to how designers think about a page. Margins on a component is seen everywhere that component is used. How far an element is from another element should be thought of in a specific layout or context, not globally.

CSS
:root {
	--small: 8px;
	--medium: 16px;
	--large: 24px;
	--extra-large: 32px;
}

.page {
	padding: var(--extra-large);
	gap: var(--large);
}

.card {
	padding: var(--large);
	gap: var(--medium);
}

.card__footer {
	gap: var(--small);
}
CSS

It’s Coming Together

Below is an example of how a page is filled with elements using flexboxes and grids to it’s full potential. The screenshots below were from a Chrome based browser.

Legend:

  1. Green – padding
  2. Purple – gap
  3. Orange – margins but if all from this article is followed, there shouldn’t be any

Conclusion

It’s time to ditch the default display block type and start using flexboxes and grids. There’s no need to use margins now that gaps are widely supported. CSS started as a way to style documents but now current CSS features allows developers to create complex webapps where design isn’t limited to a word-processor like layout. With components being the go-to way of building a project, having one that only affects itself and its own children makes it easier to combine with other components without the worry that an element can change a parent’s layout unexpectedly.

By using the power of flexboxes and grids, developers can create dynamic, responsive, and visually stunning websites. We at Bonito Tech can help you harness the full potential of modern CSS. Our developers can transform your website into a sleek, user-friendly experience. We provide tailored services for businesses to succeed in the digital landscape, creating thoughtful solutions done with integrity. Contact us today!