CSS - Grid Layout

Grid Container

To create a grid container, set the display property of an element to grid or inline-grid. The grid value creates a block-level grid container, while inline-grid creates an inline-level grid container.

After an element becomes a grid container, you can define the rows and columns of the grid using the grid-template-rows and grid-template-columns properties. These properties accept a space-separated list of values that represent the size of each row or column.

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px 100px;
  grid-template-columns: 1fr 2fr 1fr;
}

You can also use other units like pixels, percentages, or the auto keyword to define the size of rows and columns. The auto keyword allows the row or column to automatically adjust its size based on the content of the grid items.

Grid Items

Grid items are elements that are direct children of the grid container. Once you have created a grid container and defined its rows and columns, you can place grid items within the grid using the grid-row and grid-column properties.

The grid-row property determines the row placement of a grid item, while the grid-column property determines the column placement. These properties accept values that refer to the grid lines, which are numbered starting from 1.

To place a grid item, you specify the starting and ending grid lines for both rows and columns. grid-row: 1 / 3; places an item starting from the first grid line and ending at the third grid line in the row axis. Similarly, grid-column: 2 / 4; places an item starting from the second grid line and ending at the fourth grid line in the column axis.

.item1 {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

.item2 {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

In this example, item1 is placed in the first row and spans from the first to the third column. item2 starts from the second row and spans until the fourth row, and it starts from the second column and spans until the fourth column.

Grid items can also span across multiple rows or columns by specifying a larger ending grid line value. For instance, grid-row: 1 / span 2; means the item starts at the first grid line and spans across two rows.

.item3 {
  grid-row: 1 / span 2;
  grid-column: 1 / span 3;
}

Here, item3 starts at the first row and spans across two rows, and it starts at the first column and spans across three columns.

By using the grid-row and grid-column properties, you have precise control over the placement of grid items within the grid container. This allows you to create complex and flexible layouts by positioning items in specific rows and columns and spanning them across multiple grid cells as needed.

Grid Lines

Grid lines are the numbered lines that define the start and end of rows and columns in a grid container. They are used as references to place grid items within the grid. Grid lines are automatically generated when you define rows and columns using the grid-template-rows and grid-template-columns properties.

In CSS Grid, grid lines are 1-based, meaning the first grid line starts at 1 instead of 0. The grid lines are numbered from left to right for columns and from top to bottom for rows. The ending grid line is always one more than the last grid line.

To reference grid lines and place items in the grid, you can use the following properties:

These properties accept integer values that correspond to the grid line numbers.

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

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

The .item is placed starting from the second row grid line and ending at the fourth row grid line. It starts at the first column grid line and ends at the third column grid line.

You can also use the shorthand properties grid-row and grid-column to set both the start and end grid lines in one line of code.

.item {
  grid-row: 2 / 4;
  grid-column: 1 / 3;
}

The above code is equivalent to the previous code, where the start and end grid lines are separated by a forward slash (/).

Grid lines provide a way to create precise and flexible layouts by allowing you to refer to specific lines in the grid when placing grid items. By using grid line-based placement, you can create complex grid structures and position items exactly where you want them within the grid container.

Grid Areas

You can define and reference named sections of the grid called grid areas to place grid items. Instead of using grid line numbers, you can create a more readable layout by assigning names to specific areas of the grid.

To define grid areas, use the grid-template-areas property on the grid container. This property accepts a string value that represents the layout of the grid. Each string represents a row, and each word within the string represents a cell in that row. Repeated words create a single named grid area that spans multiple cells.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar footer footer";
}

Three grid areas are defined: header, sidebar, main, and footer. The header area spans across all three columns in the first row. The sidebar area spans one column in the second and third rows. The main area spans two columns in the second row, and the footer area spans two columns in the third row.

After defining the grid areas, you can place grid items into those areas using the grid-area property on the grid items.

.item-a {
  grid-area: header;
}

.item-b {
  grid-area: sidebar;
}

.item-c {
  grid-area: main;
}

.item-d {
  grid-area: footer;
}

Each grid item is assigned to a specific named grid area using the grid-area property. The .item-a is placed in the header area, .item-b in the sidebar area, .item-c in the main area, and .item-d in the footer area.

Using named grid areas provides a more semantic and readable way to define the layout of the grid. It allows you to create a visual representation of the grid structure directly in your CSS code.

You can also use the grid-template property as a shorthand to define the grid rows, columns, and areas in a single declaration.

.grid-container {
  display: grid;
  grid-template:
    "header header header" 100px
    "sidebar main main" 200px
    "sidebar footer footer" 100px
    / 1fr 1fr 1fr;
}

The grid-template property defines the grid areas along with their row heights and column widths. The area names are specified first, followed by the row heights, and then the column widths.

Grid areas offer a way to create complex layouts by providing named sections of the grid that you can reference and place grid items into. They make your CSS code more readable and maintainable by providing a clear visual representation of the grid structure.

Grid Gap

Grid gap is the space between grid rows and columns. It lets you make gutters or empty spaces between grid cells, giving visual separation between grid items.

To set the gap size, you can use the grid-row-gap, grid-column-gap, or the short grid-gap properties on the grid container.

The grid-row-gap property sets the gap size between rows, while the grid-column-gap property sets the gap size between columns. You can set the gap size using any valid length unit, such as pixels or ems.

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 20px;
  grid-column-gap: 10px;
}

The grid-row-gap is set to 20px, making a gap of 20 pixels between each row. The grid-column-gap is set to 10px, making a gap of 10 pixels between each column.

You can also use the grid-gap short property to set both the row and column gaps in a single line. It takes one or two values, where the first value sets the row gap and the second value sets the column gap. If only one value is given, it is used for both the row and column gaps.

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px 10px; /* row gap 20px, column gap 10px */
}

The grid-gap property sets a row gap of 20px and a column gap of 10px.

You can also use the grid-gap shorthand with a single value, which will be used for both the row and column gaps.

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px; /* row and column gap 20px */
}

Here, the grid-gap property sets both the row and column gaps to 20px.

Grid gaps give an easy way to add space between grid cells without having to manually change the size of grid items. They help make visual separation and improve the readability of the grid layout.

It's important to note that grid gaps only add space between grid cells and do not change the outer edges of the grid container. If you want to add space around the outer edges, you can use padding on the grid container or margins on the grid items.

By using grid gaps, you can make visually appealing and well-spaced grid layouts, making it easier to tell between grid items and improve the overall design of your web page.

Grid Alignment

Grid alignment lets you control how grid items are placed and aligned within their grid cells and how the entire grid is aligned within the grid container. You can align items both horizontally and vertically using the justify-items and align-items properties on the grid container.

The justify-items property controls the horizontal alignment of grid items within their cells. It accepts the following values:

.grid-container {
  display: grid;
  justify-items: center;
}

The align-items property controls the vertical alignment of grid items within their cells. It accepts the same values as justify-items:

.grid-container {
  display: grid;
  align-items: end;
}

You can also align the entire grid within its container using the justify-content and align-content properties on the grid container.

The justify-content property controls the horizontal alignment of the grid within its container. It accepts the following values:

.grid-container {
  display: grid;
  justify-content: space-around;
}

The align-content property controls the vertical alignment of the grid within its container. It accepts the same values as justify-content:

.grid-container {
  display: grid;
  align-content: center;
}

Grid alignment properties give you control over how grid items are positioned within their cells and how the entire grid is aligned within its container. By using justify-items and align-items, you can control the horizontal and vertical alignment of individual grid items. With justify-content and align-content, you can align the entire grid within its container, distributing extra space as needed.

These alignment properties allow you to create visually appealing and well-aligned grid layouts, providing flexibility in how the grid and its items are positioned.

Responsive Grid Layout

CSS Grid Layout provides tools for creating responsive layouts that adjust based on screen size. By combining grid with media queries, you can make grid layouts that adapt to different screen sizes and devices.

To make a responsive grid layout, you can use media queries to change the number of rows and columns based on the screen size. Media queries allow you to apply different CSS styles based on the characteristics of the device, such as screen width.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
}

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 100px);
  }
}

@media screen and (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(12, 100px);
  }
}

The grid container starts with four columns and three rows. When the screen width is 768 pixels or less, the grid layout changes to two columns and six rows. And when the screen width is 480 pixels or less, the grid layout changes to a single column and twelve rows.

By changing the grid-template-columns and grid-template-rows properties within media queries, you can adjust the grid structure to better fit different screen sizes.

Another way to make responsive grid layouts is to use the fr unit for flexible sizing. The fr unit represents a fraction of the available space in the grid container. It allows grid tracks (rows or columns) to automatically adjust their size based on the available space.

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

The grid container has three columns. The first and third columns each take up one fraction unit of the available space, while the second column takes up two fraction units. This means the second column will be twice as wide as the first and third columns.

Using the fr unit allows the grid to respond to changes in the container size without the need for media queries. As the container size changes, the columns will automatically adjust their widths proportionally based on the specified fractions.

You can also use the auto keyword in combination with the fr unit to create flexible grid tracks that adapt to their content.

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  grid-template-rows: repeat(3, 100px);
}

The grid container has three columns. The first column has a fixed width of 200 pixels, the second column takes up one fraction unit of the remaining space, and the third column automatically adjusts its width based on its content.

By combining fixed sizes, flexible sizes using the fr unit, and the auto keyword, you can create responsive grid layouts that adapt to both the container size and the content within the grid cells.

Responsive grid layouts are necessary for building websites and applications that work well across different devices and screen sizes. CSS Grid Layout, along with media queries and flexible sizing units like fr, provides a toolset for creating adaptive and responsive designs.

Grid and Flexbox

CSS Grid Layout and Flexbox are two layout systems in CSS that can be used together to create complex and responsive designs. While Grid is good for creating overall page layouts, Flexbox is good at handling component layouts within grid cells.

By combining Grid and Flexbox, you can use the strengths of both systems to build layouts that adapt to different screen sizes and content needs.

One approach is to use Grid for defining the overall structure of the page, such as creating a header, sidebar, main content area, and footer. Grid lets you divide the page into sections and control their placement and sizing using rows and columns.

.page-container {
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 200px 1fr;
  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; }

Within each grid cell, you can then use Flexbox to layout the individual components and elements. Flexbox provides a way to distribute space, align items, and control their order within a container.

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  flex-basis: calc(33.33% - 20px);
  margin-bottom: 20px;
}

The .card-container is a grid cell that contains a set of card components. By using Flexbox on the .card-container, you can distribute the cards horizontally, wrap them to the next line when needed, and control the spacing between them.

The .card elements are the individual components within the card container. By setting flex-basis to calc(33.33% - 20px), each card will take up one-third of the available space minus a margin of 20 pixels. This allows the cards to respond to changes in the container size while keeping consistent spacing.

By combining Grid for the overall layout and Flexbox for component layout, you can create designs that are both structured and flexible. Grid provides a way to define the high-level structure of the page, while Flexbox lets you create dynamic and responsive component layouts within each grid cell.

When using Grid and Flexbox together, it's important to consider the specific layout needs of your design. You may use Grid for the main page structure and Flexbox for smaller components, or vice versa, depending on the complexity and responsiveness needed at each level of the layout.