Mastering Layouts With Grid Properties

Positioning elements on a webpage can be very complicated when working with complex layouts. This is where the CSS grid comes in handy. It is a layout system designed to simplify the process of creating complex layouts.

How does it help you? Unlike traditional layout methods that only allow you to position elements in either rows or columns, CSS grid offers you the best of both worlds—a 2D approach using rows and columns.

Grid Containers and Items

You can apply CSS grid properties to two main types of elements: parent and children. When you set the display property to “grid” for a parent element, it transforms that element into a grid container. Any child element within this grid container becomes a grid item, inheriting the applied grid properties.

Here’s how it’s represented:

A grid item can also become a grid container. You can now refer to the layout as a nested grid—a grid within a grid. The main grid container is now referred to as the outer grid, while the item-turned-grid container becomes an inner grid.

Each of these grids operates independently of the other, meaning that the properties set for an inner grid do not affect the layout of the outer grid, and vice-versa.

Here’s what it looks like:

Mastering the relationship between grid containers and items is essential for building two-dimensional layouts effectively.

Grid Lines and Tracks

Before you start using the CSS grid, there are two key terms you should be familiar with:

1. Grid lines: Grid lines refer to the horizontal and vertical lines that form the grid in a CSS grid layout. They specify the starting and ending points of rows and columns, helping to organize where things go on the grid. These lines are like the edges of boxes; they have numbers that help you reference the elements when positioning. Here the red dashed line represents them:

2. 

   Grid tracks: They are the gaps between grid lines that define rows and columns. They are like the building blocks of the grid layout. In the above image, the colored area within each item represents the grid track.

Think of grid lines and tracks as the building blocks of a grid layout, like the lines on a sheet of graph paper. When a horizontal grid line intersects with a vertical grid line, it forms a box-shaped cell. These cells act as containers where you can place your grid items.

CSS Grid Container Properties

These are properties you can apply to the grid container to organize the layout and assist in positioning elements within it. As mentioned earlier, one of them is the display property set to grid. Here are more:

Grid Template

This property defines the size of rows and columns. You can size these properties using pixels, percentages, or the fractional unit (fr). Also, you can use keywords like auto, minmax(), and repeat() to enhance flexibility.

• grid-template-rows: Sets row heights.
• grid-template-columns: Defines column widths.

Here are some examples:

Using Pixels:

 .grid-container {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-rows: 250px 250px;
} 

Using Percentages:

 .grid-container {
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 50% 50%;
} 

Using fr:

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

Using auto and minmax() Keywords:

 .grid-container {
  grid-template-columns: auto minmax(150px, 1fr) auto;
  grid-template-rows: 100px auto;
}
 

Using repeat() for Consistent Sizing:

 .grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
}
 

Auto Placement and Grid Template Areas

Auto Placement: Auto placement is like letting the grid decide where to put items. If you don’t specify exact positions, the grid will automatically place items in the order they appear in the markup. This is helpful when you have many items and want them to fill the grid evenly.

Grid Template Areas: Think of grid template areas as creating a layout using named zones. It’s like naming rooms on a floor plan. You can refer to these area names when positioning grid items. For instance:

 .grid-container {
  grid-template-areas:'header header header header'
    'sidebar main main right'
    'sidebar content content right'
    'footer footer footer footer';
}
 

This layout is like a grid with three columns and four rows. There are two rows for the main content area. The labeled areas include “header,” “sidebar,” “content,” and “footer.” In the next sections, you’ll learn how to use these area labels in the properties of each grid item.

Alignment in CSS Grid

You can use alignment properties to control the positioning of grid items within their grid cells. The properties are:

• justify-items: Controls horizontal alignment of items within their grid cell.
  • Values: start, end, center, and stretch.
• align-items: Controls vertical alignment of items within their grid cell.
  • Values: start, end, center, and stretch.
• justify-content: Aligns the entire grid within the container along the horizontal axis.
  • Values: start, end, center, stretch, space-between, space-around, and space-evenly.
• align-content: Aligns the entire grid within the container along the vertical axis.
  • Values: start, end, center, stretch, space-between, space-around, and space-evenly.

Here’s an example:

 .grid-container {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  align-content: center;
} 

In this example, items will center both horizontally and vertically within their cells. Space will be distributed evenly between the columns of the entire grid, and the grid will center vertically in the container.

Grid Gap

Grid gap refers to the space between rows and columns in a grid layout. It helps create visual separation and adds some room between grid items.

The grid-gap property allows you to set the gap between rows and columns. You can use various units to define it, such as pixels (px), percentages (%), em units (em), and more.

 .grid-container {
  grid-gap: 20px;
} 

In this example, the grid container has two columns with a 20-pixel gap between them. This spacing visually separates the columns and enhances the layout.

CSS Grid Item Properties

Here are some key properties that control the behavior of individual grid items within a CSS grid layout, along with examples:

grid-row-start and grid-row-end:

• Defines the starting and ending row lines for an item.
• Values can be line numbers, “span n,” or “auto”.

 .grid-item-1 {
  grid-row-start: 2;
  grid-row-end: 4;
}
 

This code places Grid Item 1 from the second-row line to the fourth-row line.

grid-column-start and grid-column-end:

• Defines the starting and ending column lines for an item.
• Values can be line numbers, “span n” or “auto”.

 .grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
}
 

This code places Grid Item 2 from the first column line to the third column line.

grid-area:

• Specifies the size and position of a grid item within the grid by referencing the named grid lines in grid-template-areas.
• As mentioned earlier, predefined area names are already in use with the grid-template-areas property. Here’s an example of how to use it together with grid-area.

 .header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.content {
  grid-area: content;
}
.right {
  grid-area: right;
}
.footer {
  grid-area: footer;
} 

Here’s the result:

justify-self:

• Aligns individual items horizontally within its cell.
• Values can be start, end, center, and stretch.

 .grid-item-5 {
  justify-self: center;
}
 

This code horizontally centers the Grid Item 5 within its cell.

align-self:

• Align individual items vertically within its cell.
• Values can be start, end, center, and stretch.

 .grid-item-1 {
  align-self: end;
}
 

This code aligns Grid Item 1 to the bottom of its cell.

Feel free to combine and customize these properties to create the layout and look you want for each grid item in your CSS Grid.

Creating Responsive Layouts Using CSS Grids

Using CSS grids for creating responsive layouts is important to ensure your webpage adapts seamlessly to various screen sizes and devices. You can apply these methods:

• Media Queries: You can use media queries to apply different grid layouts depending on screen sizes. For instance, you may need to rearrange grid items or adjust column widths for smaller screens.
• Flexible Units: Use relative units such as percentages and fr to enable grid items and columns to adjust proportionally to available space.
• minmax(): Use the minmax() function to specify a range of sizes for grid columns or rows. It ensures that items will not appear too small or too large on different screens.

Remember to adjust columns and other elements like gaps between grid items, font sizes, and margins. It ensures a consistent and well-designed layout that works well on various devices.

Explore the Possibilities of CSS Grid Layout

Embracing the flexibility and power of CSS grid will allow you to craft layouts that not only look great but also adapt seamlessly to the demands of modern web design. So, dive into the world of grids, explore the possibilities, and elevate your web development skills.

As you delve into layout systems, you may want to compare other layout methods with CSS grids. You can do so with the CSS Flexbox module. This will help you learn to decide when working on a project.