CSS
HTML
JavaScript
jQuery
PHP
SQL
WordPress

or View All Tags

CSS Tutorials

Overview

A CSS grid Layout offers a grid-based system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

To create a grid layout, the outer container needs to be set to display: grid or display: inline-grid. All direct children of the grid container will automatically become grid items.

				
					<div class="grid_container">

</div>
				
			
				
					.grid_container {
    display: grid;
}
				
			
				
					.grid_container {
    display: inline-grid;
}

This will now allow for a series of rows and columns creating the grid system.

				
					<div class="grid_container">
    <div class="box_1">Header</div>
    <div class="box_2">Content</div>
    <div class="box_3">Sidebar</div>
    <div class="box_4">Footer</div>
</div>

The following CSS now transforms the div elements above into grid items of varying sizes, expanding across multiple columns when necessary.

  • Line 3 creates the series of columns
  • Lines 20 and 21 tell .box_1 to span across all four columns (end 5), creating a grid area for the header
  • Line 28 and 29 does the same, creating a grid area for the footer.
  • Line 24 and 25 does something similar, spanning across three columns to create the main content area
				
					.grid_container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 3px;
    row-gap: 3px;
    background-color: #ff0000;
    padding: 3px;
}
.grid_container > div {
    background-color: white;
    text-align: center;
    padding: 20px;
    font-size: 24px;
}
.grid_container > .box_2,
.grid_container > .box_3 {
	text-align: left;
}
.box_1 {
  grid-column-start: 1;
  grid-column-end: 5;
}
.box_2 {
  grid-column-start: 1;
  grid-column-end: 4;
}
.box_4 {
  grid-column-start: 1;
  grid-column-end: 5;
}

Example from the Above Code

Header
Content
Sidebar
Footer

Grid Properties

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.

CSS
HTML
JavaScript
jQuery
PHP
SQL
WordPress

Why 1SMARTchicken?

This site was built and is maintained to benefit my autistic son.
See More →

My Son's Name is Johnny

He was diagnosed as autistic quite late, at age four...
His story

Buy Me a Coffee

Thanks for your support!

CSS Books

All are affiliate links. Thank you for your support!

CSS NOTES:

Feedback

If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.

1SMARTchicken Icon
1SMARTchicken - Code Made Easy