How to Use CSS Grid Layout - Grid Properties Explained with Examples - Free Printable

The image depicts a CSS Grid layout with specific dimensions and structure. The task is to analyze the grid and determine its properties, such as the number of rows and columns, the sizes of the grid areas, and how the items are positioned. Below is a detailed explanation of the solution:

Step 1: Understand the Grid Structure

- The grid has 3 columns and 3 rows, as indicated by the arrangement of the colored boxes.
- The grid uses the `grid-template-columns` property to define the width of each column.
- The grid uses the `grid-template-rows` property to define the height of each row.
- There is a uniform gap of 10px between the grid items, as specified by the `gap: 10px` property.

Step 2: Analyze the Columns

- The grid has three columns of varying widths:
1. The first column (leftmost) is the widest.
2. The second column is narrower than the first but wider than the third.
3. The third column (rightmost) is the narrowest.

Step 3: Analyze the Rows

- The grid has three rows of equal height:
1. The first row spans the top section of the grid.
2. The second row spans the middle section of the grid.
3. The third row spans the bottom section of the grid.

Step 4: Identify the Grid Items

- The grid contains several colored boxes, each occupying specific areas:
- Green Boxes:
- One large green box spans the entire first column.
- Another large green box spans the entire third column.
- Yellow Boxes:
- Two yellow boxes are placed in the second column, one in the second row and one in the third row.
- Red Boxes:
- Three red boxes are distributed across the second column, spanning different rows.

Step 5: Define the Grid Layout Using CSS

To replicate this grid layout in CSS, we can use the following properties:

#### HTML Structure
```html
<div class="grid-container">
<div class="item green-1"></div>
<div class="item green-2"></div>
<div class="item red-1"></div>
<div class="item yellow-1"></div>
<div class="item red-2"></div>
<div class="item yellow-2"></div>
<div class="item green-3"></div>
</div>
```

#### CSS Styling
```css
.grid-container {
display: grid;
grid-template-columns: 3fr 2fr 1fr; /* Define column widths */
grid-template-rows: repeat(3, 1fr); /* Define row heights */
gap: 10px; /* Define spacing between grid items */
}

.item {
border: 2px solid black; /* Add borders for visibility */
}

.green-1 {
grid-column: 1 / span 1; /* Span the first column */
grid-row: 1 / span 3; /* Span all three rows */
background-color: green;
}

.green-2 {
grid-column: 3 / span 1; /* Span the third column */
grid-row: 1 / span 3; /* Span all three rows */
background-color: green;
}

.red-1 {
grid-column: 2 / span 1; /* Span the second column */
grid-row: 2 / span 1; /* Span the second row */
background-color: red;
}

.yellow-1 {
grid-column: 2 / span 1; /* Span the second column */
grid-row: 3 / span 1; /* Span the third row */
background-color: yellow;
}

.red-2 {
grid-column: 2 / span 1; /* Span the second column */
grid-row: 1 / span 1; /* Span the first row */
background-color: red;
}

.yellow-2 {
grid-column: 2 / span 1; /* Span the second column */
grid-row: 2 / span 1; /* Span the second row */
background-color: yellow;
}
```

Explanation of the CSS

1. `grid-template-columns: 3fr 2fr 1fr;`:
- This defines the relative widths of the columns. The first column is 3 times the size of the third column, and the second column is 2 times the size of the third column.

2. `grid-template-rows: repeat(3, 1fr);`:
- This defines that all three rows have equal heights.

3. `gap: 10px;`:
- This adds a 10px gap between grid items.

4. Grid Item Placement:
- Each item is placed using the `grid-column` and `grid-row` properties to specify which columns and rows they span.

Final Answer

The CSS Grid layout can be achieved using the following properties:
- Columns: `grid-template-columns: 3fr 2fr 1fr;`
- Rows: `grid-template-rows: repeat(3, 1fr);`
- Gap: `gap: 10px;`
- Item Placement: Defined using `grid-column` and `grid-row` for each item.

Thus, the solution is:
\[
\boxed{\text{See the CSS code above for the implementation.}}
\]