Little Tip: Draw Your Grid in ASCII in Your CSS Comments for Quick Reference

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.