CSS - Creating Layouts with Grid Template Columns and Rows

Creating Layouts with Grid Template Columns and Rows in CSS

In CSS Grid you have the ability to define the layout of the grid using properties, like grid template columns and grid template rows. These properties enable you to specify the number and dimensions of rows and columns within the grid. You can use fixed measurements, percentage-based dimensions, or adaptable fr units that distribute space proportionally.

Code Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Template Columns and Rows</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 100px auto 100px;
            grid-template-rows: 50px 200px;
            gap: 10px;
        }
        .grid-item {
            background-color: #8cacea;
            padding: 20px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Header</div>
        <div class="grid-item">Main content</div>
        <div class="grid-item">Sidebar</div>
        <div class="grid-item">Footer</div>
    </div>
</body>
</html>

Explanation of code

HTML structure

  • It is structured similarly to the first example, with four grid-item components contained within a grid-container.

CSS Styling

  • grid-template-columns: 100px auto 100px; specifies three columns, the middle one taking up the remaining space (auto), with the first and last being 100px wide.
  • grid-template-rows 50 px 200 px; this sets the height of two rows, 50 px, and 200 px, respectively.
  • There is a 10px space between each grid item.
  • The grid elements' text style and background color are identical to those in the first example.

logo

CSS

Beginner 5 Hours

Creating Layouts with Grid Template Columns and Rows in CSS

In CSS Grid you have the ability to define the layout of the grid using properties, like grid template columns and grid template rows. These properties enable you to specify the number and dimensions of rows and columns within the grid. You can use fixed measurements, percentage-based dimensions, or adaptable fr units that distribute space proportionally.

Code Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Template Columns and Rows</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 100px auto 100px;
            grid-template-rows: 50px 200px;
            gap: 10px;
        }
        .grid-item {
            background-color: #8cacea;
            padding: 20px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Header</div>
        <div class="grid-item">Main content</div>
        <div class="grid-item">Sidebar</div>
        <div class="grid-item">Footer</div>
    </div>
</body>
</html>

Explanation of code

HTML structure

  • It is structured similarly to the first example, with four grid-item components contained within a grid-container.

CSS Styling

  • grid-template-columns: 100px auto 100px; specifies three columns, the middle one taking up the remaining space (auto), with the first and last being 100px wide.
  • grid-template-rows 50 px 200 px; this sets the height of two rows, 50 px, and 200 px, respectively.
  • There is a 10px space between each grid item.
  • The grid elements' text style and background color are identical to those in the first example.

Related Tutorials

Frequently Asked Questions for CSS

Content, padding, border, and margin make up the box model.

Relative moves from original position; absolute positions relative to nearest positioned ancestor.

id is unique; class can be reused.

visibility hides but keeps space; display removes element from layout.

Minify files, reduce specificity, and remove unused styles.

Overrides all other declarations, regardless of specificity.

Use margin: auto or flexbox/grid techniques.

Allow responsive design by applying styles based on screen size or device.

Define relationships between selectors: descendant ( ), child (>), adjacent (+), sibling (~).

Tools like SASS or LESS add features like variables and nesting to CSS.

Targets part of an element, like ::before or ::after.

Use @import "filename.css"; at the top of the file.

Controls stacking order of overlapping elements.

Forces a property to inherit value from parent.

Static — not affected by top, bottom, left, or right.

Use universal selector * or define styles in body/root.

em is relative to parent; rem is relative to root element.

Inline, internal (embedded), and external CSS.

A layout model for arranging elements in rows or columns with flexible sizing.

Targets elements in a specific state, like :hover or :nth-child().

Use fluid layouts, media queries, and relative units.

CSS styles HTML elements to control layout, color, fonts, and responsiveness.

Reusable custom property values, declared with --var-name.

Determines which rule applies when multiple rules target the same element.

Performs calculations to dynamically set CSS property values.

line

Copyrights © 2024 letsupdateskills All rights reserved