skip to content

Layout grid

The eds-l-grid component is a layout utility for creating responsive grid layouts where

  • Each grid item should be the same width
  • Grid items should wrap according to available space

The purpose of eds-l-grid is to enable basic grid layouts—suitable for all kinds of content and product teasers—without having to defer to @media queries. Grid items are sized based around an ideal width (set as $eds-l-grid--basis in Sass and --eds-l-grid--basis in CSS).

Demo

<ul class="eds-l-grid">
    <li>Example 1</li>
    <li>Example 2</li>
    <li>Example 3</li>
</ul>

Styles

@import '@springernature/elements/components/eds-l-grid';

Usage

Default settings

Using the default settings, $eds-l-grid--basis is equal to min(300px, 100%). This means each item will be the same width and as close to 300px in width as the context will allow. The min() function prevents items using more than 100% of the horizontal space and causing overflow (obscured content; horizontal scrolling).

Note the use of list semantics. Collections of teasers/products should ordinarily be identified as lists in screen reader software. However, <ul> and <li> are not mandatory, allowing you to repurpose the component.

<ul class="eds-l-grid">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>

Custom settings

The component maps $eds-l-grid--basis and $eds-l-grid--gap to CSS custom properties, allowing you to adjust the values inline. In the following example, --eds-l-grid--gap is set to 2em and --eds-l-grid--basis to 20ch.

<ul
	class="eds-l-grid"
	style="--eds-l-grid--gap: 2em; --eds-l-grid--basis: min(20ch, 100%)"
>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>

Browser support

The eds-l-grid component uses CSS Grid with a fallback for older browsers that don't support display: grid. Browsers without CSS Grid support will see items stacked vertically with spacing applied via margin-top. Modern browsers (those supporting CSS Grid) will render the responsive grid layout as intended.

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the Ask Elements Teams channel.