CSS Grid Properties - Gap, Grid Column Gap, Grid Template Columns

Here are the CSS grid properties which is necessary to build a beautiful UI using grid faster -

1. gap: 1rem;: This property is a shorthand for setting both grid-row-gap and grid-column-gap to the same value. It defines the size of the gap between grid items, both horizontally and vertically. In this case, the gap is set to 1rem.

2. grid-column-gap and grid-row-gap: These properties set the size of the gap between columns (grid-column-gap) and rows (grid-row-gap) in the grid. If you’ve used gap: 1rem;, then both of these properties are implicitly set to the specified value (1rem in this case).

3. grid-template-columns: 1fr 2fr 1fr;: This property defines the number and size of columns in the grid. In this example, there are three columns. The 1fr and 2fr are fractional units. fr stands for fraction, and it’s a unit that represents a fraction of the available space. In this case, the first and third columns are set to occupy 1 part each, and the second column is set to occupy 2 parts. So, if the total available space is, for example, 300 pixels, the first and third columns would each take up 100 pixels, and the second column would take up 200 pixels.

4. grid-template-rows: This property works similarly to grid-template-columns but for rows. It defines the number and size of rows in the grid. If you don’t explicitly set it, it will automatically create rows based on the content. If you want to set specific sizes for rows, you can use the fr unit or other units like pixels.

Here’s an example:

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

.grid-item {
  background-color: lightblue;
  border: 1px solid darkblue;
  padding: 20px;
}

<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>

In this example, the grid has three columns with the specified fractional sizes, and three rows with specific sizes in pixels. The grid items are divs with content from 1 to 6, and they will be placed in the grid according to the specified column and row sizes.