Layout your page: flex or grid

What is layout?

Styling of a webpage can be roughly falls in to two categories

1) Define the overall/DOM elements grid, which says how the page elements should be placed

2) Define individual style attributes for the DOM elements like font colour, font size, background etc.

There are many techniques in CSS that can be used for layout, from the old properties like float, padding, margin etc. to advanced display properties like flex, grid etc and HTML elements like table, div, span etc.

Layout using Flex

The Flexbox layout provides a more efficient way to lay out and align items in a container, even when their size is unknown and/or dynamic and hence the word flex.

Flex layout gives the container the ability to change the elements width/height to best fill the available space, this is especially useful when we need to design for different kind of devices and screen sizes. A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Flexbox layout is based on direction and unlike the block(vertical) or inline(horizontal) layout.

Flexible Boxes

Just like the Box Model are used to explain padding/margin or inline/block elements, we can use the below model to understand flex model.

1. Flex container — The parent element in which flex items are contained. flex or inline-flex values of the display property can be used to define a flex container.
2. Flex item — Each child of a flex container is a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.
3. Axes — Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.
   The flex-direction property establishes the main axis.
   The justify-content property defines how flex items are laid out along the main axis on the current line.
   The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
   The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.
4. Directions — The main start/main end and cross start/cross end sides of the flex container describe the origin and terminus of the flow of flex items.They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to-right, right-to-left, etc.)
   The order property assigns elements to ordinal groups and determines which elements appear first.
   The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.
5. Lines — Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.
6. Dimensions —The flex items’ agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.
   The min-height and min-width properties initial value is 0.
   The flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items.

Layout using grid

A grid is a group of vertical and horizontal lines that are used to position the various design and content pieces of a web page, magazine, or newspaper. The goal of a grid is to serve as a base for placing the various pieces of content and to make sure these pieces are aligned and spaced out evenly.

CSS Grid Layout is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. Initially we used tables, then floats, positioning and inline-block etc but all of these methods had many limitations like vertical centering, for instance. Flexbox helped out, but it’s intended for simpler one-dimensional layouts, not complex two-dimensional ones. Grid is the very first CSS module created specifically to solve the layout problems. Grid Layout gives us a method of creating grid structures that are described in CSS and not in HTML.

Grid Layout lets us properly separate the order of elements in the source from their visual presentation. As a designer this means you are free to change the location of page elements as is best for your layout at different breakpoints and not need to compromise a sensible structured document for your responsive design.

It’s very easy to make grid adapt to the available space. With each element having an area on the grid, things are not in risk of overlapping due to text size change, more content than expected or small viewports.

Unlike with an HTML table-based layout, you can layer items on the grid. So one item can overlap another if required.

Just like we have seen flex terminologies in the above section, let us understand the terms in Grid System.The figure below shows the building blocks of a grid:

1. Grid Container — The element on which display: grid is applied. It's the direct parent of all the grid items.
2. Grid Item — The children (direct descendants) of the grid container.
3. 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. We can refer to them by number, or by name.In the above grid, there are 7 vertical lines and 5 horizontal lines. Lines are given numbers starting from 1. Vertical lines are shown from left to right, but this depends on the writing direction. Lines can optionally be given names, which helps with referencing them in CSS.
4. Grid Track — Is the space between two Grid Lines. So in the above example, there are 6 vertical tracks and 5 horizontal tracks. Lines are useful to indicate where content starts and stops, but tracks are the ones where content fits.
5. Grid Cell — Is the space between two adjacent row and two adjacent column grid lines. It is the smallest/single unit of the grid that is available for us to place an item into. In other words, a Grid Cell is the space between 4 Grid Lines. Conceptually it is just like a table cell. In the figure above, only one cell has been highlighted, but there are 24 cells in the grid.
6. Grid Area — The total space surrounded by four grid lines. A grid area may contain any number of grid cells.

Like tables, grid layout enables an author to align elements into columns and rows. However, unlike tables, grid layout doesn’t have content structure, therefore enabling a wide variety of layouts that is not possible in tables. For example, a grid container’s child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

And, the grid is completely defined in pure CSS. This means that apart from the parent HTML element the grid is applied to, there’s no need to define any extra elements for the columns, rows, cells, or areas.

As we saw, CSS grids are a pretty good tool for defining layouts that have nice characteristics like authoring simplicity, maintainability, separation of content and layout — characteristics that play well with responsive design.

Flex OR Grid. What is the choice?

Whenever we think about page layout, one of the common question that we get into is whether we should go with Grid/Flex? Or when should I use Grid or the other.

Flex is mainly used in one-dimensional layouts, anything that needs to be laid out in a straight line. But Grid is mainly for two-dimensional layouts.

If you need to define a layout as a row or a column, and you would like the flexibility to respond to the content of that row then flexbox. If you want to define a grid and fit content into it in two dimensions, use grid.

The flexbox layout algorithm is direction-agnostic as opposed to the block layout, which is vertically-biased, or the inline layout, which is horizontally-biased. While the block layout works well for pages, it lacks sufficient definition to support application components that have to change orientation, resize, stretch, or shrink as the user agent changes, flips from vertical to horizontal, and so forth. Flexbox layout is most appropriate for the components of an application, and small-scale layouts, while Grid layout is intended for larger scale layouts.

References

1. MDN
2. CSS TRICKS
3. SCOTCH.IO