██FR█████ █INTELL███████████

180 Days of Frontend Development Challenge: Day 33 CSS Grid Basics


This content originally appeared on DEV Community and was authored by CodeWithDhanian

Welcome back, front-end warriors! We’ve successfully conquered advanced Flexbox yesterday, and now, on Day 33, we’re shifting gears to explore another powerful layout tool in our arsenal: CSS Grid Basics. If Flexbox is your one-dimensional layout friend, think of CSS Grid as its awesome two-dimensional counterpart.

CSS Grid allows you to define a grid structure with rows and columns, giving you incredible control over the placement and sizing of elements within that grid. It’s fantastic for creating more complex and structured page layouts, moving beyond the linear flow of Flexbox.

The Grid Revelation

If you’ve ever worked with tables or thought about laying out elements in a more structured, row-and-column fashion, then CSS Grid will likely feel like a breath of fresh air. Instead of relying on floats or other older techniques for complex layouts, Grid provides a semantic and powerful way to define your page structure directly in your CSS.

Core Concepts We’ll Explore Today:

  1. The Grid Container: Just like Flexbox has a flex container, Grid has a grid container. You turn an HTML element into a grid container by setting its display property to grid. This is the parent element that will house your grid items.

  2. Grid Items: These are the direct child elements of the grid container. Once the parent is a grid, these children automatically become grid items and can be placed within the defined grid.

  3. Grid Lines: These are the horizontal and vertical lines that define the structure of the grid. They are numbered, starting from 1. These lines are what you’ll use to place your grid items in specific cells.

  4. Grid Tracks: These are the spaces between two adjacent grid lines. Horizontal grid tracks are rows, and vertical grid tracks are columns. You define the size of these tracks.

  5. Grid Cells: A grid cell is the smallest unit in a grid layout. It’s the space bounded by four grid lines (two row lines and two column lines).

  6. Grid Areas: A grid area can consist of one or more grid cells. You can span grid items across multiple rows and/or columns to create larger layout areas.

Setting Up Your Grid:

The first step is to define your grid container and its structure. You do this using properties on the parent element:

  • display: grid;: This turns the element into a grid container.

  • grid-template-rows: This defines the number and height of the rows in your grid. You can use fixed units (px, em, rem), percentages, or the fr unit (fractional unit, which represents a share of the available space).

  • grid-template-columns: This defines the number and width of the columns in your grid. Similar to grid-template-rows, you can use various unit types, including fr.

Example: Creating a basic 3×2 grid

HTML:

<div class="grid-container">
 <div class="grid-item item1">Item 1</div>
 <div class="grid-item item2">Item 2</div>
 <div class="grid-item item3">Item 3</div>
 <div class="grid-item item4">Item 4</div>
 <div class="grid-item item5">Item 5</div>
 <div class="grid-item item6">Item 6</div>
</div>

CSS:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr; /* Three columns, the second is twice as wide as the others */
 grid-template-rows: auto auto;    /* Two rows, their height will be determined by content */
 gap: 10px;                      /* Space between grid items (rows and columns) */
}

.grid-item {
 background-color: lightblue;
 padding: 20px;
 border: 1px solid #ccc;
 text-align: center;
}

Explanation:

  • display: grid; makes .grid-container a grid.
  • grid-template-columns: 1fr 2fr 1fr; creates three columns. The fr unit divides the available space. Here, the second column will take up twice the space as the first and third.
  • grid-template-rows: auto auto; creates two rows. auto means the height of the row will adjust based on the content within it.
  • gap: 10px; adds a 10-pixel gap between all rows and all columns. You can also use row-gap and column-gap to set these independently.

Placing Items in the Grid:

Once you’ve defined your grid, you need to tell the grid items where to go. There are a couple of ways to do this:

  1. Using Grid Line Numbers: You can specify the start and end grid lines for a grid item using the following properties on the grid item itself:
  * `grid-column-start`
  * `grid-column-end`
  * `grid-row-start`
  * `grid-row-end`

You can also use the shorthand properties:

  * `grid-column: start-line / end-line;`
  * `grid-row: start-line / end-line;`
  * `grid-area: row-start / column-start / row-end / column-end;`

**Example:**

Let's make "Item 3" span across the first two rows and the second and third columns.

**CSS (adding to the previous example):**

```css
.item3 {
grid-column: 2 / 4; /* Starts at column line 2, ends at column line 4 (spanning 2 columns) */
grid-row: 1 / 3;    /* Starts at row line 1, ends at row line 3 (spanning 2 rows) */
background-color: lightcoral;
}
```
  1. Using Named Grid Areas: For more complex layouts, you can name specific grid areas within your grid container and then place items within those named areas.
  * Use the `grid-template-areas` property on the grid container to define named areas.
  * Use the `grid-area` property on the grid items to place them in the desired named area.

**Example:**

**CSS (modifying the grid container):**

```css
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
grid-template-areas:
 "header header sidebar"
 "main content sidebar";
}

.item1 { grid-area: header; background-color: orange; }
.item2 { grid-area: main; background-color: lightgreen; }
.item3 { grid-area: content; background-color: lightcoral; }
.item4 { grid-area: sidebar; background-color: lightblue; }
.item5 { /* We have more items than named areas in this example */ }
.item6 { }
/* You'd likely adjust your HTML or grid-template-areas to fit all items */
/* For demonstration, let's place item 5 in the first column of the second row */
.item5 { grid-column: 1 / 2; grid-row: 2 / 3; background-color: yellow; }
/* And item 6 in the last column of the second row */
.item6 { grid-column: 3 / 4; grid-row: 2 / 3; background-color: pink; }
```

**HTML (adjusting to the named areas, though the previous HTML structure would work too):**

```html
<div class="grid-container">
<div class="grid-item item1">Header</div>
<div class="grid-item item2">Main</div>
<div class="grid-item item3">Content</div>
<div class="grid-item item4">Sidebar</div>
<div class="grid-item item5">Extra 1</div>
<div class="grid-item item6">Extra 2</div>
</div>
```

Explanation:


    

  • In grid-template-areas, each row represents a row in the grid, and the strings within each row represent the columns. The names you use (e.g., "header", "main") correspond to the grid-area property on the grid items.
    • 

  • Notice how you're essentially drawing the layout of your grid visually within the CSS.
    • 

  • If you want a grid cell to be empty, you can use a dot (.) in grid-template-areas.
    • 

  • Grid items that are not explicitly placed will be automatically placed into empty grid cells in a left-to-right, top-to-bottom order.

    •

Your Challenge for Day 33:

  1. Create a grid container with at least 3 columns and 2 rows. Experiment with different units for your grid-template-columns and grid-template-rows (e.g., fr, px, %, auto).
  2. Place at least 6 grid items within your grid.
  3. Use grid line numbers to position at least two of your grid items, making one of them span across multiple rows and/or columns.
  4. Define named grid areas in your grid container.
  5. Place at least three of your grid items using the grid-area property to target the named areas.
  6. Experiment with the gap property to add spacing between your grid items. Try using different values for row-gap and column-gap.
  7. Bonus: Try nesting grids. Place a grid container inside one of your grid items and lay out elements within that nested grid.

Remember, the key to mastering CSS Grid is practice. Play around with the different properties and see how they affect the layout of your elements. Don’t be afraid to experiment and make mistakes – that’s how you learn! Open your browser’s developer tools and inspect the grid to see how the lines and areas are defined.

Tomorrow, we’ll delve deeper into CSS Grid, exploring more advanced features. Get comfortable with these basics today, and you’ll be well-prepared for the exciting possibilities Grid offers. You’ve got this


This content originally appeared on DEV Community and was authored by CodeWithDhanian