Ah the frustration of trying to make a website layout using a hodgepodge of floats, tables, and positioning hacks. Like a sculptor chipping away at a piece of marble, you try to bring your figure to life, but then find a number of quirks in the marble and the limitations of it. But what if there was a better way using CSS Grids?
The CSS Grid, is a layout system that has transformed the way web designers and developers approach their designs. By using CSS Grids, you can effortlessly arrange elements on a page, thereby easily creating complex and responsive designs. However, if you are not familiar with the term “CSS,” you may be wondering what it is. CSS means, Cascading Style Sheets, and walks hand in hand with HTML and Javascript to produce your webpage.
Basically, a CSS Grid provides a framework for defining rows and columns, allowing you to place elements precisely where you want them on your grid. It can be thought of as having a digital drafting table with an infinite grid, giving you the power to create visually stunning and functional layouts.
This post will cover the world of the CSS Grid system allowing you to take your web development skills to new heights.
Basic Concepts of CSS Grids

When building a house, you need a solid foundation and framing and it is similar a CSS Grid. In the world of the CSS Grid, using this analogy, the “foundation” is the grid container, and the “framework” is defined by grid items.
The Grid Container: Your Layout’s Foundation
A grid container is like a sheet of paper or canvas that is divided into a series of horizontal and vertical lines, creating cells. Like the 12-column grid, talked about in a previous post, this is the parent element that holds and organizes all your content. Two elements, grid containers and grid items, are the fundamental elements in the CSS Grid.
Using a CSS Grid to transform an ordinary element into a grid container, we can use the display: grid property in CSS. Once used, you have a generic grid. Within this grid, we have grid tracks that are spaces between the grid lines, forming the rows and columns of our grid. These “tracks” can be thought of as scaffolding upon which the content will be hung.
To define the size and number of these tracks, we use the grid-template-columns and grid-template-rows properties. If you want equal size columns, you can use grid-template-columns: repeat (3, 1fr). If you need two rows, perhaps one with a fixed height and another that takes up the remaining space, use grid-template-rows: 100px, 1fr. By using a CSS Grid, you can create any arrangement you want.
Grid Items: The Building Blocks of Your Layout
Grid items are the content that lives within the grid container. They are the child elements that populate the grid cells and can be thought of as the bricks filling in a wall.
In CSS, grid items are placed in cells by default, starting from the top left and then going across. However, this can be changed by using the grid-column and grid-row properties. For example, suppose you want to have a grid item go across two or more columns. In these cases, you would just define the starting and ending row lines. It is similar to having coordinates on a map.
Advanced Grid Placement and Layout
Using the CSS Grid you can name specific template areas such as headers, sidebars, the main content area, and the footer area. Having names for the areas can help in the organization of the overall site and can help you keep track of the location of the various grids on the page.
Grid Template Areas
The grid-template-area property allows you to name your grid areas. Each word in the string represents a grid area and you use the same word to assign grid items to the area. The code for naming the grids would be:
.grid-container {
display: grid;
grid-template-areas;
“header header”
“sidebar main”
“footer footer”;
}
.header { grid-area: header;}
.sidebar { grid-area: sidebar;}
.main { grid-area: main;}
.footer { grid-area: footer;}
Auto-Placement and Implicit and Explicit Grids
In some cases the placement of the grid items is not specified. However, the magic of the CSS Grid has an auto-placement algorithm that assigns positions based on the available space and order of the elements. In order to completely understand the grids, you need to know the interplay between explicit and implicit grids.
- Explicit Grid: In this grid, the rows and columns are defined using grid-template-rows and grid-template-columns.
- Implicit Grid: When grid items are placed outside of these defined areas, the CSS Grid automatically creates new rows or columns to accomodate the new material. The area outside of the defined areas is the implicit grid.
Alignment and Justification
When designing layouts we want to be able to control where grid items are positioned within their cells. To do this we use the alignment and justification properties. It is helpful to experiment with different layouts to completely understand how these properties work.
- Justify-items and align-items: These properties control how items are positioned within their individual grid cells, horizontally (justify) and vertically (align). This is like aligning text in a paragraph.
- Justify-content and align-content: These properties control the alignment of the entire grid content within the grid container. This is the difference between centering and stretching your content to fill the available space.
Responsiveness with CSS Grids

When you design your website your users will view the content on a myriad of different sized devices from desktop computers to smartphones. Fortunately, the CSS Grid system allows your content to adapt to different size devices. The property to do this is media query.
Media Queries
Media queries serve as the conductors of the layout that direct the different instruments (grid elements) to play various tunes (arrangements) based on the size of the stage (screen size). They do this by applying different CSS rules based on conditions like screen width, orientation, resolution, and user preferences.
For example, on larger screen sizes, we might want a three-column layout, but on smaller screens, we may want to stack the columns vertically. Media queries allows you to do this without a problem. For those who use WordPress or another CMS, these actions are often handled automatically via your theme and often part of responsive themes.
Some examples of code to do the above are:
/*Three-column layout for larger screens */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*Single-column layout for smaller screens */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
Fluid Grids
Fluid grids are like media queries, but they do not need the explicit breakpoints and can make your layout adapt to any screen size. In a CSS grid, fluid grids use relative units such as percentages or fractions (fr). Instead of fixed width columns, columns are defined to proportionally adjust to the available space.
The example below shows the code for a two-column layout where one column takes up 60% of the width and the other takes up 40%.
.grid-container {
display: grid;
grid-template-columns: 60% 40%;
}
However, using the fr unit, a three-column layout can be created where each column takes up an equal fraction of the available space.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Having Even Greater Control with minmax()
If you want even greater control over the sizes of your layout, you can use the minmax() function. This function allows for a range of sizes for the grid tracks and makes sure that the columns or rows do not become too narrow or too wide on extreme screen sizes.
Making Layouts Accessibile with CSS Grid

In order to follow the Web Content Accessibility Guidelines (WCAG), our layouts need to be accessible for all users. Fortunately, CSS Grids have tools to make your grids accessible.
Keyboard Navigation
Users who are mobility impaired often need to navigate your websites with a keyboard, as they do not have the coordination to use a mouse. As such, your grid layout needs to be designed to accomodate these users.
Layouts are made keyboard accessible using headings in HTML. But in CSS Grid, the elements can be moved visually, which can disrupt the tab order and create confusion. To mitigate this conflict the tabindex attribute can be used to define the order of the elements.
It is also important to make sure that interactive elements like buttons and links have clear visual indicators when they are focused. This could be a change of color, a border, or an outline that provides visual feedback. Generally, it is best to provide a sense of motion in the feedback to be more clear and help those who are colorblind.
Optimizing for Screen Readers
Users who are visually impaired will use a screen reader to view the website. These readers convert text and other elements into spoken words or Braille, in order to provide an auditory or tactile representation of the webpage.
When you use a CSS Grid, the screen reader needs to be able to understand the structure and relationships between the grid lines. Screen readers can be assisted by using semantic HTML elements, such as <nav>, <main>, and <aside>, to provide context the meaning to different sections of the grid.
ARIA (Accessible Rich Internet Applications) attributes can provide information about the grid structure and the roles of the elements. For instance, the attribute aria-label can be used to provide descriptive labels for grid areas or role= “navigation” to identify a navigation menu within the grid.
Real-World Uses of the CSS Grid System

Below are some real-world examples of the CSS Grid in action.
- Magazine Layout: The CSS Grid can be used to create a digital magazine with articles, images, and sidebars that are arranged in a visually pleasing manner. With a magazine layout, you can define grid areas for the cover, main articles, sidebars, and even advertisements, allowing them to adapt without a hitch to different screen sizes.
- The Dashboard Interface: The CSS Grid allows you to create a structured and organized layout for dashboards that have charts, graphs, and data visualizations. Different grids areas can be used for each component, making it easy to adjust the layout based on user needs or data priorities.
- The E-commerce Product Grid: This example uses the CSS Grid to make rows and columns of products. Using the grid you can control the number of columns of products. Using the grid you can control the number columns, spacing between the products, and create functional product areas that span multiple grid cells.
- The Image Gallery: In this example, the CSS Grid is used to show a collection of photographs. The grid can be used to make a dynamic and responsive image gallery for images of varying sizes, thereby having a balanced layout.
- The Website with a “Holy Grail” Layout: This is a classic website layout with the major components – header, footer, main content area, and two sidebars, laid out using the CSS Grid.
Specific Examples Using the CSS Grid
The websites of The New York Times and CNN show the use of the CSS Grid with distinct sections, each with their own layout. Both of these media outlets use grid containers to organize articles, images, and multimedia content, creating a dynamic and responsive user experience.
CSS Grid vs. Flexbox
Last, but not least, you may have heard about Flexbox in regards to CSS. In this section, I wanted to talk about the similarities and differences between these two applications.
CSS Grid: The Master of Two Dimensions
The CSS Grid excels at creating complex, two-dimensional layouts with rows and columns. It is similar to having a digital drafting table where you can precisely position elements within a grid structure. Below we will explore some of the strengths and weaknesses of the CSS Grid.
- Strengths:
- True Two-Dimensional Control: The CSS Grid handles both rows and columns with ease, making it ideal for page layouts and intricate designs.
- Flexibility and Control: You have detailed control over the placement of grid elements, being able to span them across rows and columns and even overlap them.
- It is Easy to Make Responsive Layouts: The CSS Grid works seamlessly with media queries and fluid units, making it easy to produce responsive layouts for different size screens.
- Weaknesses:
- It Can Be Overkill for Simpler Layouts: For easier layouts, such as one-dimensional arrangements, Flexbox might be a more effective choice.
Flexbox: The Champion of the One-Dimensional Layout
Flexbox excels at managing the alignment and distribution of items along a single axis, either horizontally or vertically.
- Strengths:
- Simplicity for One-Dimensional Layouts: Flexbox is perfect for arranging items in a row or column, like navigation menus or lists.
- Powerful Alignment Capabilities: Flexbox offers excellent control over how items are aligned and distributed within their container.
- Responsive and Adaptive: Just like the CSS Grid, Flexbox can adapt to different screen sizes, making it responsive.
- Weaknesses:
- It is Challenged with Complex, Two-Dimensional Layouts: Flexbox is cumbersome to use to intricate grid structures.
Choosing Which to Use
- Need to control the layout of an entire page or create a complex grid? CSS Grid
- Need to align items along a single axis or manage the layout of a specific container? Flexbox
However, in making your choice, you can use both the CSS Grid and Flexbox in the same layout. Think of it as the CSS Grid providing the framework and Flexbox providing the finer details. Used together, they can provide a comprehensive toolkit for creating any layout imaginable.
Conclusion
To conclude, we have looked at the basics of the CSS Grid system with grid containers and grid items to the more complex features of advanced placement, responsive design, and accessibility. We have also looked at the similar, but different Flexbox.
However, we have not covered all of the features of CSS Grid and you are encouraged to look more into the vast world of CSS. Below are some resources that can help you learn more about CSS and its Grid.
- The W3C CSS Grid Specification: This is the official documentation from the World Wide Web Consortium that provides a comprehensive overview of CSS Grids.
- CSS Grid Garden: A fun and interactive game that helps you learn the fundamentals of CSS Grids.
- Grid by Example: A website by Rachel Andrew that offers tutorials, examples, and articles about CSS.
- Layout Land: A YouTube channel by Jen Simmons that has videos and tutorials about CSS.
As you develop your skills and start to use the power of CSS Grids, remember that web design is not just about aeshetics. Web design is about creating meaningful and accessible experiences for all users. So let your creativity flourish and use your newfound knowledge to build websites that are both beautiful and functional.