CSS Grid - Beginner Tutorial

CSS Grid is a powerful layout system that allows you to create complex, responsive designs with ease. In this tutorial, we'll take a look at how to use CSS Grid to create a simple grid-based layout.

First, let's create a basic HTML structure for our layout. We'll create a container element with a class of "grid" and inside that container, we'll create several child elements that will make up our grid.

<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

Next, we'll add some basic CSS styles to our container element to set it up as a grid.

.grid {
  display: grid; /* This sets the container as a grid */
  grid-template-columns: repeat(3, 1fr); /* This creates 3 equal-width columns */
  grid-template-rows: repeat(2, 1fr); /* This creates 2 equal-height rows */
  grid-gap: 10px; /* This adds 10px of space between each grid item */
}

Now that we have our grid set up, we can start positioning our grid items (optional). By default, all grid items will be positioned in the first row and first column of the grid. We can use the grid-column and grid-row properties to position items in specific columns and rows.

.grid-item:nth-child(1) {
  grid-column: 1 / 2; /* This positions the item in the first column */
  grid-row: 1 / 2; /* This positions the item in the first row */
}

.grid-item:nth-child(2) {
  grid-column: 2 / 3; /* This positions the item in the second column */
  grid-row: 1 / 2; /* This positions the item in the first row */
}

.grid-item:nth-child(3) {
  grid-column: 3 / 4; /* This positions the item in the third column */
  grid-row: 1 / 2; /* This positions the item in the first row */
}

.grid-item:nth-child(4) {
  grid-column: 1 / 3; /* This positions the item in the first and second column */
  grid-row: 2 / 3; /* This positions the item in the second row */
}

And with that, we've created a basic grid-based layout using CSS Grid. There are many more features and properties available in CSS Grid, such as using grid areas, aligning and spacing items, and creating responsive grids, but this tutorial should give you a solid foundation to build upon.

You can also use grid-template-areas, grid-template, grid-auto-flow, grid-auto-rows and grid-auto-columns to build more complex grid.

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

Now that we have defined our grid layout using grid-template-columns, grid-template-rows and grid-template-areas, we can assign each grid item to a specific grid area using the grid-area property.

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}

Using grid-template-areas and grid-area properties together allows us to create more semantic and readable code, making it easier to understand the layout of our grid.

Another powerful feature of CSS Grid is the ability to create responsive grids. We can use media queries to adjust the number of columns and rows in our grid based on the screen size. For example, we can create a 2-column layout for smaller screens and a 4-column layout for larger screens.

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .sidebar {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
}

.grid {
  grid-column-gap: 20px;
  grid-row-gap: 10px;
  justify-items: center;
  align-items: center;
}