WDS76 - Becoming Greedy in CSS(Part 4)

In the last article, we learned two main properties of CSS Grids which are display and grid-template-columns or rows. This two properties helped us to create a simple grid layout with just 3 lines of CSS code. Now let's see some other properties that will help us to create a perfect CSS grid layout.

Grid Gaps

The space between each column/row is called gaps.We can adjust the gap size by using one of these properties:

• grid-column-gap
• grid-row-gap
• grid-gap

Here how we will use it:

.container {
  display: grid;
  grid-column-gap: 50px;
}

.container {
  display: grid;
  grid-row-gap: 50px;
}

grid-gap is shorthand for this properties.

.container {
  display: grid;
  grid-gap: 50px 100px;
}

First Layout

Now we are ready to create first full-fledged CSS Grid layout. Let's do it...
See our responsive layout is ready. You can check it by changing the size of the output. In the next article, we will customize this grid item according to our need to accommodate our web page elements in it.
That's all for today. #keepCoding.