CSS Tutorials

Creating Layouts with Grid Template Columns and Rows

Creating Layouts with Grid Template Columns and Rows

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

Creating Layouts with Grid Template Columns and Rows

Beginner 5 Hours

Creating Layouts with Grid Template Columns and Rows

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.

Similar Data Science Tutorials

Related tutotials

Frequently Asked Questions for css

line

Mail us :

Address :

India

Categories

Copyrights © 2024 letsupdateskills All rights reserved