Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Grid System


CSS Grid can be used to create one-dimensional layouts and two-dimensional layouts. Imagine a table with rows and columns. Imagine that each table has 12 columns. Imagine the ability to join multiple columns in a row together to create a larger space for your content. That is what CSS Grid is like. Now imagine that every line between a row and every line between a column can have its width set.

CSS Grid System

How to Create a CSS Grid

It is very easy to set up a grid for your page. You can turn any HTML element into a grid container by setting its display property to the grid. In this example, we build several containers (header, nav, main and footer). Then we create another "wrapper" (section) that will wrap around all of the other container tags. The wrapper (the section tag) is called the parent element and the inner container elements are called the items.

  1. Apply the DISPLAY property to an element that is wrapped around other elements.

    1. Set the VALUE to either "grid" or "inline-grid".

#page {
display: grid; width: 100%; height: 200px; grid-template:
[header-left] "head head" 30px [header-right]
[main-left] "nav main" 1fr [main-right]
[footer-left] "nav foot" 30px [footer-right] / 120px 1fr;}
header { background-color: lime; grid-area: head;}
nav { background-color: lightblue; grid-area: nav;}
main { background-color: yellow; grid-area: main;}
footer { background-color: red; grid-area: foot;}

<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</section>

css grid page layout

If you read the information above and reviewed and understand the demo then go ahead and move to the next page to learn more CSS. We will cover the Grid Template, Auto-Fill, and Auto-Fit.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved