Grid for CSS: Get The 2 Dimensional New Layout System

CSS Grid Layout is a two-dimensional grid-based layout system that came to sheerly change the way we design user interfaces in software.

You’re probably used to using Flexbox, but there’s room to explore in here.

Let’s go further

Grid offers a layout system with columns and rows, therefore, easier to develop a webpage. It’s composed of a parent element with child elements within.

Here’s a basic example for you to try taken from w3schools:

So you’ll get this!

CSS has always been and it’s still used to layout web pages, but there’s always room to up-the-ante.

First, we went for tables, floats, positioning and inline-block, however these methods were mainly hacks and didn’t take into account a lot of important functionalities. 

Here are some important functionalities and use cases for Flexbox and CSS Grid:

Flexbox:

1. One-Dimensional Layout: Flexbox is designed for one-dimensional layouts, primarily for organizing elements in a row (horizontally) or a column (vertically).
2. Content Alignment: It excels at aligning and distributing content along a single axis. This is especially useful for centering elements within a container.
3. Variable Sizes: Flexbox allows elements to have flexible and dynamic widths or heights based on available space, making it suitable for dynamic content.
4. Ordering: You can easily reorder elements within a container without changing their source order in the HTML.
5. Space Distribution: Flexbox provides powerful tools for distributing space between or around items to create responsive designs.
6. Responsive Menus and Toolbars: Ideal for creating responsive navigation menus, toolbars, and other one-dimensional components.

CSS Grid:

1. Two-Dimensional Layout: CSS Grid is designed for two-dimensional layouts, allowing you to create complex grids with both rows and columns.
2. Explicit Grids: You can define the exact number of rows and columns, making it suitable for grid-based designs and complex web layouts.
3. Grid Gaps: Grid enables easy control of gaps (margins) between grid items in both rows and columns.
4. Responsive Design: It’s great for creating responsive web designs with multi-column layouts that automatically adjust based on available screen space.
5. Alignment: Grid offers fine-grained control over the alignment of items, both horizontally and vertically, within grid cells.
6. Named Lines and Areas: You can name grid lines and areas, making it easier to create complex layouts with clear, semantic structure.
7. Nested Grids: Grids can be nested within other grids, allowing for hierarchical layouts and more complex designs.
8. Masonry Layouts: CSS Grid can be used to create masonry-style layouts, where items fit tightly into the available space with varied heights.

Our Effectus Engineers’ Team often uses both Flexbox and CSS Grid together to achieve complex and responsive layouts.

Do you want to team-up? Contact us or just fill our Pre-Sale tool.

Flexbox excels at organizing content within a container, while Grid provides a powerful way to structure the overall layout of a web page, including headers, sidebars, and main content areas.

Want to be an expert? Then, understanding when and how to use each layout system is essential for effective web design.

Let’s debrief:

Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.

Flexbox also came as a dev-asset to develop and set great layouts, and its one-directional flow has different use cases — and they complement each other!

There are some caveats and misconceptions you need to be aware of: check this post!

There are 6 concepts which are fundamental to understand how Grid works. All of them are easily confuse; so the more you practice the better.

Let’s hop on this jargon:

• Grid Container

The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

• Grid Line

The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

• Grid Track

The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here’s the grid track between the second and third-row grid lines.

• Grid Area

The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

• Grid Item

The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

• Grid Cell

The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

You can fin both, properties for the Parent [the grid container] and properties for the Child [the grid items].

Some parent properties

Display:

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:

• grid – generates a block-level grid
• inline-grid – generates an inline-level grid

.container {
  display: grid | inline-grid;
}

A glimpse into CSS Tricks: taken from https://css-tricks.com/snippets/css/complete-guide-grid/#aa-display

grid-template-columns
grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:

• <track-size> – can be a length, a percentage, or a fraction of the free space in the grid using the fr unit (more on this unit over at DigitalOcean)
• <line-name> – an arbitrary name of your choosing

.container {
  grid-template-columns: ...  ...;
  <em>/* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */</em>
  grid-template-rows: ... ...;
  <em>/* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */</em>
}

Grid lines are automatically assigned positive numbers from these assignments (-1 being an alternate for the very last row).

But you can choose to explicitly name the lines. Note the bracket syntax for the line names:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and row2-start:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

If your definition contains repeating parts, you can use the repeat() notation to streamline things:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Which is equivalent to this:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

If multiple lines share the same name, they can be referenced by their line name and count.

.item {
  grid-column-start: col-start 2;
}

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

The free space is calculated after any non-flexible items. In this example the total amount of free space available to the fr units doesn’t include the 50px:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

Some Child properties:

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

Values:

• <line> – can be a number to refer to a numbered grid line, or a name to refer to a named grid line
• span <number> – the item will span across the provided number of grid tracks
• span <name> – the item will span across until it hits the next line with the provided name
• auto – indicates auto-placement, an automatic span, or a default span of one

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

Examples:

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

If no grid-column-end/grid-row-end is declared, the item will span 1 track by default.

Items can overlap each other. You can use z-index to control their stacking order.

Find a list to all the Properties for the Parent:

• grid-template-columns – grid-template-rows
• grid-template-areas
• grid-template
• column-gap / row-gap / grid-column-gap / grid-row-gap
• gap / grid-gap
• justify-items
• align-items
• place-items
• justify-content
• align-content
• place-content
• grid-auto-columns / grid-auto-rows
• grid-auto-flow
• grid

Find a list to all the Properties for the Children:

• grid-column / grid-row
• grid-area
• justify-self
• align-self
• place-self

Special Units & Functions

• fr units
• Sizing Keywords
• Sizing Functions
• The repeat() Function and Keywords
• Masonry
• Subgrid

There is a whole world for CSS-Grid Animation for you to explore.

Let’s call it an end, but we urge you to start programming and applying these tips.

Stay tuned, and don’t forget to check out our other posts for more insights on code improvement and tips!

Whether you’re a seasoned developer or just starting out, Flexbox is definitely worth considering for your next mobile app project. Check our posts and Instagram to find out more!