CSS Display Grid and Sketch Layout

Depending on your journey as a designer, you may be used to the freedom that graphic media allows: to create overlaps/overlays or to elaborate compositions and grids that fill all the paper with pretty organized photos and texts. However, why is it so hard to build a web page with this same freedom? Fortunately the capacity to build these layouts have been improving and what’s best: it is so simple that you can start using it right now!

Danilo Woznica
Sep 23, 2017 · 6 min read
Image for post
Image for post

How the web layout works

<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
<div class="row">
<div class="col-xs-8">.col-xs-8</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
<div class="row">
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
</div>

The grid display solution!

#container {
/* 1: Set the width */
width: 960px;

/* Invoke the grid */
display: grid;

/* 2: Define the columns, in this case 12 columns with liquid width */
grid-template-columns: repeat(12, 1fr);

/* Define 8 rows with 110px of height */
grid-template-rows: repeat(8, 110px);

/* 3: And the gap width 10px */
grid-gap: 10px;
}
Image for post
Image for post
12-column grid in Display grid and you can see the full code here
.box {
/* Occupy the third to the eleventh column row */
grid-column: 3/11;

/* And occupy the region from 1 to 2 line */
grid-row: 1/2;
}

In the Sketch Layout

Image for post
Image for post
Layout settings

Responsive layout is now fun

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 400px 100px 100px;
grid-gap: 10px;

grid-template-areas: 'header header header'
'sidebar article article'
'sidebar footer footer';
}

.header { grid-area: header }
.sidebar { grid-area: sidebar }
.article { grid-area: article }
.footer { grid-area: footer }
Image for post
Image for post
Classic desktop website, but in display grid and you can see the full code here
@media screen and (max-width: 768px) {
.container {
grid-template-areas: 'header header header'
'article article article'
'sidebar sidebar sidebar'
'footer footer footer';
}
}
Image for post
Image for post
Classic mobile website, you can see the full code here

What will change in my layout?

Image for post
Image for post
Layout grid on desktop
Image for post
Image for post
At same grid on mobile

Think outside the grid

References

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store