CSS Grid - Grid Template Columns

Exercise

  1. In the "index.html" file, replace the code with the following:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <h1>CSS Grid</h1>
  <h3>Grid Template Columns</h3>
  <!-- grid container -->
  <div class="grid-container-2-columns">
    <!-- flex items -->
    <div class="box">
      <p>Grid Item 1</p>
    </div>
    <div class="box">
      <p>Grid Item 2</p>
    </div>
  </div>
  <!-- grid container -->
  <div class="grid-container-3-columns">
    <!-- flex items -->
    <div class="box">
      <p>Grid Item 1</p>
    </div>
    <div class="box">
      <p>Grid Item 2</p>
    </div>
    <div class="box">
      <p>Grid Item 3</p>
    </div>
  </div>
  <!-- grid container -->
  <div class="grid-container-3-columns">
    <!-- flex items -->
    <div class="box">
      <p>Grid Item 1</p>
    </div>
    <div class="box">
      <p>Grid Item 2</p>
    </div>
    <div class="box">
      <p>Grid Item 3</p>
    </div>
    <div class="box">
      <p>Grid Item 4</p>
    </div>
    <div class="box">
      <p>Grid Item 5</p>
    </div>
    <div class="box">
      <p>Grid Item 6</p>
    </div>
  </div>
</body>

</html>
  1. Save.
  2. If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
  3. In the "styles.css" file, replace the code with the following:
/* Reset Browser Defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-container-2-columns {
  border: 5px solid blue;
  margin: 10px;
  display: grid;
  grid-template-columns: 100px 200px;
}

.grid-container-3-columns {
  border: 5px solid blue;
  margin: 10px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.box {
  padding: 1rem;
  background: grey;
  border: 2px solid red;
}
  1. Save.
  2. In the browser, you should see the following:

    3. Exercise 2 Result

Code Walkthrough and Explanation


CSS Grid

CSS Grid is a layout system in CSS that allows you to create complex grid-based layouts with ease. With CSS Grid, you can divide a web page into a grid of rows and columns, and then place content within those grid areas. CSS Grid is different from other layout systems in that it provides a two-dimensional grid system, rather than just a linear layout. This allows for more complex and responsive layouts that can adapt to different screen sizes and devices. CSS Grid is also highly customizable, allowing you to control the size and position of grid items and adjust the size and spacing of grid rows and columns. Overall, CSS Grid is a powerful tool for creating sophisticated and dynamic layouts on the web.


display: grid;

display: grid; is a CSS property that defines an element as a grid container, meaning it enables the CSS grid layout on the element's child elements. When an element is set to display: grid;, its direct children become grid items, which can be positioned in rows and columns. The display: grid; property sets up a two-dimensional grid, with columns and rows defined by the CSS grid-template-columns and grid-template-rows properties. With CSS Grid, complex layouts can be created, making it a powerful tool for creating responsive and flexible web designs.


grid-template-columns

grid-template-columns is a CSS property used to define the number and size of columns in a CSS grid container. This property allows you to specify the width of each column in the grid. You can set the size of the columns using various units like pixels, percentages, or even the fr unit (which stands for "fraction unit" and represents a fraction of the available space). For example, grid-template-columns: 1fr 2fr 1fr would create a three-column grid with the middle column taking up twice as much space as the two outer columns. You can also use auto to allow the grid to automatically size the columns based on their content.


Implicit Grid

In CSS Grid, the implicit grid refers to the rows or columns that are created automatically to accommodate content when there are no explicit rows or columns defined. The implicit grid is created when content is placed outside the boundaries of the explicitly defined grid. The size of the implicit grid is determined by the size of the content that is placed within it. By default, the items within the implicit grid are automatically placed by the grid. The implicit grid can be useful for creating flexible and responsive grid layouts, as it allows the layout to expand or contract based on the size and amount of content.


Fractional Units vs Percentages

In CSS Grid, fr and % units are available units for defining the size of grid tracks, which are the columns or rows that make up the grid.

In general, fr units are more flexible and allow for easier responsive design since they are based on the available space rather than a fixed percentage. However, % units can be useful for cases where we need to align the grid with other elements on the page that are sized with percentages.


CSS Grid vs. CSS Flexbox

CSS Grid and CSS Flexbox are both powerful layout tools in CSS, but they have different use cases and approaches to handling layout.

CSS Flexbox is designed to handle one-dimensional layouts, where items are arranged along a single row or column, and it provides great control over the alignment and spacing of items within that row or column. Flexbox is best suited for smaller scale layouts, like navigation menus, cards, and forms.

CSS Grid, on the other hand, is designed for two-dimensional layouts, where items can be placed and arranged along both rows and columns. It provides a powerful grid system that can handle complex layouts, and allows items to be placed anywhere within the grid. CSS Grid is best suited for larger scale layouts, like full-page designs, complex dashboards, and editorial layouts.

In summary, while both CSS Flexbox and CSS Grid can be used to create layouts, they are optimized for different types of layouts. CSS Flexbox is great for one-dimensional layouts, while CSS Grid is more powerful for two-dimensional layouts.


Experiment with the Code


Video and Code References


Questions? Subscribe and ask in the video comments:


GitHub and Other References