Divi WordPress Theme


By


Chris Coyier


On

Say you declared a grid like this:

body {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content auto min-content;
}

This depends on content, for sure, but how it’s likely to play out is like this:

+---+-------------+
|   |             |
|   |             |
+-----------------+
|   |             |
|   |             |
|   |             |
|   |             |
|   |             |
|   |             |
+-----------------+
|   |             |
+---+-------------+

That’s really easy to draw out quick in ASCIIFlow Infinity.

Now you want to place elements in that grid, and arguably the easiest way to do that is to specify the grid rows/columns they should start/end at.

/* grid-area: row-start / column-start / row-end / column end */

.logo {
grid-area: 1 / 1 / 2 / 2;
}

.site-header {
grid-area: 1 / 2 / 2 / 3;
}

.sidebar-nav {
grid-area: 2 / 1 / 3 / 2;
}

.main-content {
grid-area: 2 / 2 / 3 / 3;
}

.site-footer {
grid-area: 3 / 1 / 4 / 3;
}

There are other ways to do this. You could use longhand CSS properties. You could name the areas. But say you like doing it this way because it is succinct or whatever. That’s where the ASCII is useful! Leave it in a CSS comment and number the lines.

/*
1   2             3
1 +---+-------------+
|   |             |
|   |             |
2 +-----------------+
|   |             |
|   |             |
|   |             |
|   |             |
|   |             |
|   |             |
3 +-----------------+
|   |             |
4 +---+-------------+
*/

Now you’ve got an visual reference to pick out those grid numbers from.

If you like native apps and wanna get real fancy, there is Monodraw.

Load More Related Articles
Load More By Ronald Long
Load More In CSS Tricks

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

What Is Unconscious Bias? +Top Strategies to Help Avoid It

In today’s post in the diversity & inclusion series here on Envato Tuts+, we’ll delve …