CSS - Grid Basics

Grid Basics in CSS

The functionality of CSS Grid involves transforming an HTML element into a grid container with defined rows, columns, and spaces between them. By setting display; grid; or display; inline grid; on an element you establish a grid container where you can position and size grid items accurately based on the defined grid structure.

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 Basics</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            background-color: #f4f4f4;
        }
        .grid-item {
            background-color: #8cacea;
            padding: 20px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
    </div>
</body>
</html>

Explanation of code

HTML Structure

  • The CSS Grid container is one single <div> element with the class grid-container attached to it.
  • Three child <div> elements, each having a class grid-item, are present inside this container. The grid items are these.

CSS Styling

  • CSS Grid is enabled for this container since .grid-container is styled with display: grid.
  • The structure of the grid is defined by grid-template-columns: repeat(3, 1fr). Three equal-width columns are produced. The fr unit permits an equal proportion of the available space to be used by each column.
  • grid-gap: 10px; determines the horizontal and vertical spacing between each grid item.
  • To improve grid layout visibility, the backdrop of the container is changed to a light grey color, #f4f4f4.
  • The background color of each.grid-item is #8cacea, the text is centered, the padding for inner spacing is 20px, and the text color contrast is white.

 

logo

CSS

Beginner 5 Hours

Grid Basics in CSS

The functionality of CSS Grid involves transforming an HTML element into a grid container with defined rows, columns, and spaces between them. By setting display; grid; or display; inline grid; on an element you establish a grid container where you can position and size grid items accurately based on the defined grid structure.

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 Basics</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            background-color: #f4f4f4;
        }
        .grid-item {
            background-color: #8cacea;
            padding: 20px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
    </div>
</body>
</html>

Explanation of code

HTML Structure

  • The CSS Grid container is one single <div> element with the class grid-container attached to it.
  • Three child <div> elements, each having a class grid-item, are present inside this container. The grid items are these.

CSS Styling

  • CSS Grid is enabled for this container since .grid-container is styled with display: grid.
  • The structure of the grid is defined by grid-template-columns: repeat(3, 1fr). Three equal-width columns are produced. The fr unit permits an equal proportion of the available space to be used by each column.
  • grid-gap: 10px; determines the horizontal and vertical spacing between each grid item.
  • To improve grid layout visibility, the backdrop of the container is changed to a light grey color, #f4f4f4.
  • The background color of each.grid-item is #8cacea, the text is centered, the padding for inner spacing is 20px, and the text color contrast is white.

 

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