css grids

CSS Grids - Web layout moves closer to how a Graphic Designer does grids. by ciro correia

I don't think I've ever spoken to a designer or developer who loves how CSS manages layout issues, we understand it and manipulate CSS to obey us but I think we all dislike how it works. BUT WAIT! The CSS gods have heard our cries, tada! CSS Grids are now gaining widespread support in most if not all browsers - of course I suppose we'll still have to use HTML tables to craft our emails cause email apps are sadly stuck in the dark ages but maybe one day that'll change too. 

Using CSS grids closely resembles how graphic designers approach grids, this means creating layouts are not only easier in HTML/CSS but also mirror how a designer thinks about working with space. All that frustration when building a webpage layout flies out of the window, we can easily port over that mathematical structure you lovingly crafted in your visual design. Here's the HTML I created for a basic structure - bear in mind this was using columns and rows similar to any grid structure I might have built in any other creative app and without manipulating floats or absolute/relative positioning in any way.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Grids</title>
</head>
<body>
<div class="container">
    <div class="grid header">header</div>
    <div class="grid sidebar">sidebar</div>
    <div class="grid content">content</div>
    <div class="grid extra">extra</div>
    <div class="grid footer">footer</div>
</div>
</head>
</html>

The divs are in a nested structure, the container div will be declared as a grid within the CSS. The classes define the layout for each grid div. The external CSS file uses CSS grids, here is the CSS file content:

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
        grid-column-gap: 10px;
        grid-row-gap: 15px;
    }
    
.grid {
    background-color: #DC7633;
    color: #fff;
    padding: 25px;
    font-size: 3rem;
     }
     
.header {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    }
    
.sidebar {
    grid-column-start: 1;
    grid-coumn-end: 2;
    grid-row-start: 2;
    grid-row-end: 4;
    background: #A3E4D7;
    }
    
.content {
    grid-column-start: 2;
    grid-coumn-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background: #a0c273;
    height: 400px;
    }
    
.extra {
    grid-column-start: 2;
    grid-coumn-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    background: #D98880;
    }
    
.footer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    background: #2471A3;
    }

If you copy and paste the two different portions into a .html and styles.css file respectively and then open up the html file in a browser you'll be able to see how I put together a basic structure with CSS grids. Simply.

Read me wax lyrical about grids.

Cool resource on CSS Grids.