How to prototype websites quickly with CSS Grid – freeCodeCamp

website_design-creating_personal_concepts-undefined

How to prototype websites quickly with CSS Grid – freeCodeCamp

1920 1080 Pro Web Design


The CSS Grid module is a fantastic tool for creating mockups of websites. It allows you to experiment with the layout faster than any other system I’ve tried.

In this article I’ll teach you how.

I’ll also be launching a free CSS Grid course in mid December. If you want early access, leave your email here, and I’ll send it to you as soon as it’s ready.

You can also check out a preview screencast of the course here.

Our grid

We’re going to start out with a very basic grid which mimics a classic website:

I’ve styled our example a little bit, but that has nothing to do with CSS Grid, so I’m leaving that out.

First, I’ll explain the HTML and CSS we need to get this working, which I’ve broken down to four parts. Once you’ve understood those, we’ll move on to the layout experimentations.

If you’re completely new to CSS Grid, you might want to skim through my 5 minute introduction article on the subject.

1. The markup

The first thing we need is a little bit of HTML. A container (the element we’ll turn into a grid) and the items (header, menu, content, footer).

<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>

2. Basic setup in CSS

Then we need to setup our grid, and specify how many rows and columns we need. Here’s the first CSS for doing that:

.container 
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-gap: 5px;

I’m going to add more later, but I first want you to understand this.

Here’s what the above code says: create a grid with twelve columns, each being one fraction unit wide (1/12 of the total width). Create three rows, where the first will be 50px tall, the second 350px and the third one 50px. Finally, add a gap between the items in the grid.

3. Adding grid-template-areas

The feature which will allow us to experiment with layout super easily is called template areas.

To add it to the grid we’ll simply give the container a grid-template-areas property. The syntax might be a bit weird, as it’s unlike any other CSS syntax out there. Here it is:

.container 
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-template-areas:
"h h h h h h h h h h h h"
"m m c c c c c c c c c c"
"f f f f f f f f f f f f";

The logic behind the grid-template-areas property is that you create a visual representation of your grid in the code. As you can see, it has three rows and twelve columns, just like we’ve defined in grid-template-columns and grid-template-rows.

Each line represents a row and each of the characters (h, m, c, f) represent a grid cell.

Each of the four letters now form a rectangular grid-area.

As you might have guessed, I’ve chosen the characters h, m, c, f because our grid consist of header, menu, content and footer. I could have called them whatever I wanted, of course, but it makes sense to use the first character of the items they’re describing.

4. Giving areas to the items

Now we need to connect these characters with our items in the grid. To do that we’ll use the grid-area property:

.header 
grid-area: h;
.menu 
grid-area: m;
.content 
grid-area: c;
.footer 
grid-area: f;

This results in the following layout:

Experimenting with the layout

Now we’ve finally reached the beauty of this feature, as we can experiment with the layout super easily. It’s just a matter of changing the characters of the grid-template-areas property. Let’s for example move the menu over to the right hand side instead:

grid-template-areas:
“h h h h h h h h h h h h”
"c c c c c c c c c c m m”
“f f f f f f f f f f f c”;

Which results in this layout:

We can use dots to create blank grid cells.

grid-template-areas:
“. h h h h h h h h h h .”
"c c c c c c c c c c m m”
“. f f f f f f f f f f .”;

Here’s how that’ll look:

Now I’d recommend you to check out this screencast of my CSS Grid course, where you’ll be able to experiment with the code yourself.

Adding responsiveness to the mix

Combining this with responsiveness is also a killer feature, as this simply wouldn’t have been possible to do with only HTML and CSS before. Let’s say you want the menu up besides the header when it’s being viewed on mobile. Then you can simply do like this:

@media screen and (max-width: 640px) 
.container
grid-template-areas:
"m m m m m m h h h h h h"
"c c c c c c c c c c c c"
"f f f f f f f f f f f f";

And that’ll result in the following:

Remember that all these changes are done with pure CSS, without touching the HTML. We can shuffle around however we want, regardless of how the div tags are laid out in the markup.

This is called source order independence, and it’s a huge step forward for CSS.

It allows the HTML to be what it was intended to be: markup for content. And not for styling, as that’s the job of CSS.

If you’re interested in learning more about CSS Grid, just leave your email here, and I’ll give you early access to my free CSS Grid course once it’s ready.

Click the image below to see a preview of the course.

    How Can We
    Help You?

    Performance and Simplicity exists side by side.

    Contact Pro Web Design and tell us about your next project and we will make sure it is successful. Let us do what we do best.

    website_design-creating_personal_concepts-undefined website_design-creating_personal_concepts-undefined
    1920 1080 Pro Web Design

    The strange creatures called “Designers” – UX Collective

    Most people find the Designer to be a rather friendly looking fellow. Usually cheerful, wearing his/her stylish poplin…

    read more
    website_design-creating_personal_concepts-undefined website_design-creating_personal_concepts-undefined
    1920 1080 Pro Web Design

    OnePlus 6 release date, news and features

    The OnePlus 6 has been announced at its international launch event in London, England.Boasting the biggest screen OnePlus…

    read more
    website_design-creating_personal_concepts-undefined website_design-creating_personal_concepts-undefined
    1920 1080 Pro Web Design

    Now you can make reservations and buy movie tickets on Instagram – TechCrunch

    Instagram is unveiling new features for businesses that want to use their profiles to message with customers and…

    read more

    Creatives – Design, Marketing, Support

    Working Hours: 08:00 – 17:00

    Email: contact[at]prowebdesign.co.za

    Phone: +27 76 260 2730

    We Love Your Feedback