Mastering CSS Grid

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.

Core Concepts

The two main components of a grid layout are the container and the items. The container is the element on which display: grid is applied. The items are the direct children of the grid container.

Example

Here's a simple example of a 3-column grid:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #28282B;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(125, 249, 255, 0.3);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  color: #7DF9FF;
}

This will create a grid with 3 columns and 2 rows. The grid-template-columns property defines the number and size of the columns.

Conclusion

CSS Grid is an incredibly powerful tool for web developers. Experiment with the different properties to see what you can create!