CSS - Creating Layouts with Grid Areas

Creating Layouts with Grid Areas in CSS

Grid areas stand out as a feature of CSS Grid that enables you to assign names to sections of your layout grid structure.

When you label sections of your grid, with grid template areas you can easily position items into areas, by name simplifying the layout for the organization.

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 Areas</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto;
            grid-template-areas: 
                "header header"
                "sidebar main"
                "footer footer";
            gap: 10px;
        }
        .grid-item.header { grid-area: header; }
        .grid-item.sidebar { grid-area: sidebar; }
        .grid-item.main { grid-area: main; }
        .grid-item.footer { grid-area: footer; }
        .grid-item {
            background-color: #8cacea;
            padding: 20px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item header">Header</div>
        <div class="grid-item sidebar">Sidebar</div>
        <div class="grid-item main">Main Content</div>
        <div class="grid-item footer">Footer</div>
    </div>
</body>
</html>

Explanation of code

HTML structure

  • The structure consists of a four-grid-item grid-container that is assigned to the header, sidebar, main content, and footer sections of a webpage layout, respectively.

CSS Styling

  • grid-template-columns: 1fr 3fr; arranges two columns such that the first occupies one fraction of the available space and the second, three fractions; this results in a layout that effectively has a larger main content area and a smaller sidebar.
  • grid-template-rows: auto; permits content-based adjustment of the row height.
  • grid-template-areas: offers an illustration of the arrangement:
  • The header covers two columns when "header header" is used.
  • "sidebar main" arranges the primary text in the second column and the sidebar in the first.
  • "footer footer" extends both columns' worth of the footer.
  • Each grid item is assigned to the corresponding area described in grid-template-areas by using.grid-item.header { grid-area: header; } and similar lines for the sidebar, main, and footer.
  • .grid-item's style is in line with earlier instances.

logo

CSS

Beginner 5 Hours

Creating Layouts with Grid Areas in CSS

Grid areas stand out as a feature of CSS Grid that enables you to assign names to sections of your layout grid structure.

When you label sections of your grid, with grid template areas you can easily position items into areas, by name simplifying the layout for the organization.

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 Areas</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto;
            grid-template-areas: 
                "header header"
                "sidebar main"
                "footer footer";
            gap: 10px;
        }
        .grid-item.header { grid-area: header; }
        .grid-item.sidebar { grid-area: sidebar; }
        .grid-item.main { grid-area: main; }
        .grid-item.footer { grid-area: footer; }
        .grid-item {
            background-color: #8cacea;
            padding: 20px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item header">Header</div>
        <div class="grid-item sidebar">Sidebar</div>
        <div class="grid-item main">Main Content</div>
        <div class="grid-item footer">Footer</div>
    </div>
</body>
</html>

Explanation of code

HTML structure

  • The structure consists of a four-grid-item grid-container that is assigned to the header, sidebar, main content, and footer sections of a webpage layout, respectively.

CSS Styling

  • grid-template-columns: 1fr 3fr; arranges two columns such that the first occupies one fraction of the available space and the second, three fractions; this results in a layout that effectively has a larger main content area and a smaller sidebar.
  • grid-template-rows: auto; permits content-based adjustment of the row height.
  • grid-template-areas: offers an illustration of the arrangement:
  • The header covers two columns when "header header" is used.
  • "sidebar main" arranges the primary text in the second column and the sidebar in the first.
  • "footer footer" extends both columns' worth of the footer.
  • Each grid item is assigned to the corresponding area described in grid-template-areas by using.grid-item.header { grid-area: header; } and similar lines for the sidebar, main, and footer.
  • .grid-item's style is in line with earlier instances.

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