CSS FlexBox and Grid Layout

Do you remember the days when creating user friendly web layouts were a nightmare? Developers used floats, tables and positioning tricks just to make elements align properly. Thankfully, modern CSS introduced Flexbox and Grid, making layouts simpler, cleaner, and responsive.

Flexbox: One-Dimensional Layout

Flexbox (Flexible Box Layout Module) is a one-dimensional CSS layout model designed to arrange items in rows or columns. It enables elements to automatically align, distribute space, and shrink or grow to fit available space, making it ideal for responsive UI design.

“Why should we use Flexbox”

• Easy Alignment & Centering: Allows perfect horizontal and vertical alignment of items using simple properties like justify-content and align-items.
• Dynamic Space Distribution: Automatically manages space between and around elements, allowing them to grow or shrink to fit available space (flex-grow, flex-shrink).
• One-Dimensional Focus: Ideal for arranging items in a single row or column.
• Responsiveness: Elements easily wrap, reorder, or resize to adapt to different devices, such as smartphones, tablets, and desktops.
• Cleaner Code: Reduces the need for complex, nested divs and hacks like float or display: inline-block.
• Flex-Direction Control: Easily switch between horizontal (row) and vertical (column) layouts.

“How can we use Flexbox”

To use a CSS flexbox, we have to define a flex container by using display: flex on a parent element, which will automatically convert its children to flex-items. Later on we’re able to use css flex properties on the necessary elements to control layouts, alignment, responsiveness and to meet our intentions.

Key Flex Container Properties

Apply these properties to the parent element with display: flex to control the layout of its children:

• display: flex; This activates the flexbox layout model for the direct children.
• flex-direction: Defines the main axis, along which flex items are laid out. Options include row, column, row-reverse, and column-reverse.
• justify-content: Aligns items along the main axis, distributing available space between and around them. Common values include flex-start, center, space-between, space-around, and space-evenly.
• align-items: Aligns items along the cross axis (perpendicular to the main axis). Options include stretch, flex-start, center, and baseline.
• flex-wrap: Specifies whether items should wrap onto multiple lines if they exceed the container's size. Use nowrap (default) or wrap.

Key Flex Item Properties

Get AqeelAmeer’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Apply these properties to the direct children of the flex container:

• flex: A shorthand for flex-grow, flex-shrink, and flex-basis. flex: 1; is a common value to make items grow equally.
• order: Uses an integer value to visually reorder individual items, overriding the source order.
• align-self: Overrides the align-items value on the container for a single item.

Grid: Two-Dimensional Layout

“Gridbox” is an informal term commonly used to refer to CSS Grid Layout, a powerful, two-dimensional layout system in CSS. It enables developers to organize content into precise rows and columns simultaneously, offering a flexible and efficient way to build complex, responsive web designs.

“Why should we use Grid”

• Two-Dimensional Control: Unlike Flexbox, which is designed for one-dimensional layouts (rows or columns), CSS Grid allows simultaneous control over both rows and columns. This makes it ideal for designing entire page layouts, such as those with headers, sidebars, main content, and footers.
• Cleaner HTML Markup: In the past, achieving complex layouts required “hacky” methods like floats, positioning, or excessive nesting of div elements. CSS Grid significantly reduces the amount of extra, non-semantic HTML needed solely for layout purposes, resulting in cleaner and more maintainable code.
• Enhanced Responsiveness: CSS Grid includes features and units specifically designed for responsive design. The fr (fractional) unit allows columns or rows to distribute available space proportionally, while functions like repeat() and minmax() enable layouts to adapt automatically to different screen sizes and orientations without extensive media queries.
• Precise Item Placement and Overlap: You can place items into specific locations on the grid using line numbers, names, or predefined areas (via the grid-template-areas property). It also allows items to overlap within the same cell or area, which can be controlled with the z-index property for advanced visual effects.
• Easy Gutter Management: The gap property (previously grid-gap) allows you to specify consistent spacing between grid items (gutters) without having to manage margins on individual elements, which helps avoid common alignment issues.
• Improved Workflow: Grid is intuitive enough for designers and developers to work with, allowing for easier experimentation with layouts and reducing the need for constant back-and-forth between teams when making design changes.

“How can we use Grid”

To use CSS Grid, you must first define a grid container using display: grid, and then specify the size and number of columns and rows using properties like grid-template-columns and grid-template-rows. Its direct children automatically become grid items.

• Define Container: Use display: grid; on a parent element.
• Set Structure: Utilize grid-template-columns and grid-template-rows to define rows and columns.
• Place Items: Use grid-template-areas to define specific regions (e.g., header, sidebar, main) for a responsive layout.
• Automatic Sizing: Use grid-auto-columns and grid-auto-rows to manage implicitly created grid tracks.
• Flexibility: Use grid-auto-fit or grid-auto-fill to automatically handle column numbers based on available space.

Key CSS Grid Container Properties

• display: grid: Defines the element as a grid container.
• grid-template-columns / grid-template-rows: Defines the number and size of columns/rows (e.g., 1fr 1fr 1fr).
• gap (row-gap, column-gap): Sets the size of the gutters between rows and columns.
• grid-template-areas: Defines a grid template by referencing named areas.
• justify-content / align-content: Aligns the entire grid inside the container (e.g., center, space-between).

Key CSS Grid Item Properties

• grid-column / grid-row: Shorthand for start/end lines; defines an item's position and span (e.g., grid-column: 1 / 3).
• grid-area: Shorthand to assign a name to an item or set its row/column span in one line (row-start / col-start / row-end / col-end).
• justify-self / align-self: Aligns a single item within its cell.

Flex vs Grid

Previously we discussed that Flexbox is used for one-dimensional layouts which is great for navigation bars, button groups, centering items or even distributing space along a single axis
On the contrary grid is used for two-dimensional layouts which is great for page layouts, card grids, or anything requiring alignment in both directions.

“When to use Flexbox”

Use Flexbox when you need to:

• Align items within a single row or column (e.g., navigation bar items, form elements) [2, 4].
• Center content vertically and horizontally within a container [3].
• Create components where items need to wrap onto the next line when the container size changes [4].
• Distribute space dynamically between a set of items with variable widths or heights [3].

“When to use Grid”

Use Grid when you need to:

• Design a main page layout with headers, sidebars, main content, and footers [2].
• Create a complex, responsive layout with specific row and column gaps [3].
• Precisely place items into specific cells or areas of a two-dimensional grid [4].
• Overlap elements in a grid structure [2].