What's The Point of Gutters in CSS Grid Frameworks

What's the point of gutters in CSS grid frameworks?

The motivation behind a CSS Grid system is to completely automate layout. Gutters are usually desirable because white space between columns makes for better legibility so it makes sense to include them as part of the automation.

A Generator's raison d'être is to relieve you of the slightly tedious calculations necessary to implement them but without the gutters both the math and the css isn't at all complicated.

It should be very straight forward to do a no-gutter grid without a generator. e.g.

( column width X nº of columns ) + left margin + right margin = content width

.span-1 {width:100px}
.span-2 {width:200px}
.span-3 {width:300px}
.span-4 {width:400px}

etc...

CSS Grids: Relation between grid gaps(gutters) and grid lines

My intuition is that grid lines and grid gaps are in some sense the same thing.

You are almost good here. The only difference is that we don't have gaps at the edges of the grid but we do have grid lines there

From the specification:

Grid lines are the horizontal and vertical dividing lines of the grid. A grid line exists on either side of a column or row.

and

The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns.

The effect of these properties is as though the affected grid lines acquired thickness: the grid track between two grid lines is the space between the gutters that represent them. For the purpose of track sizing, each gutter is treated as an extra, empty, fixed-size track of the specified size, which is spanned by any grid items that span across its corresponding grid line.

and

Gutters only appear between tracks of the implicit grid; there is no gutter before the first track or after the last track.

A figure from the same specification:

If the above grid is having gaps it will increase the thickness of "line 2" between both columns and "line 2"/"line 3" between rows. In other words, you will always have N lines, (N - 1) columns and (N - 2) gaps.

What is the best way to deal with the mandatory left margin that comes with grid-column in Bourbon Neat 2.0 above?

You can use @grid-collpase to consume the gutters of a container.

Output:

.element {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}

Here is a pen example https://codepen.io/matthewelsom/pen/RjOEyb

Hope that is what you are looking for.

12 column CSS Grid layout and side margins/outside gutters

The best practice in this case - to get rid of left and right gutters at all. Grid system uses one single size of grid-column-gap for a single grid element. Using padding and margin for grid's children will tear the grid. So i see two ways.

#1. Centered grid without left and right gap.

Getting rid of left and right gap at all.

.wrapper {  height: 90vh;  width: 300px; /* here you can set your maximum 12 cols + 11 gaps width */  margin: 0 auto; /* this will make .wrapper centered */  display: grid;  grid-template-columns: repeat(12, 1fr);  grid-column-gap: 4px; /* like 40px, but the snippet is very small */  background: cyan;}.wrapper > div {  background: green;}

<div class="wrapper">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  </div>

How to use CSS grid framework for custom widths and gutters?

Everybody seems to have missed the point: if your gutters are not regular, then you can't use a grid system. You just create custom classes for each column and use them as needed. The grid systems use regular gutters so you can stack them (the columns) in a any order you like.

-- Jason

Neat responsive horizontal gutter

Well, I was a little bit too fast with asking this question. I did a little browsing through the Neat code, and apparently using

padding: flex-gutter();

works.

Does anyone know if this has any downsides?

Edit: Well, I found the downside. flex-gutter(), or using the bourbon function pad () (same result except for padding), defines the padding/margin around 2.3%. Problem is that, when you'll view your grid on a large screen, the padding will get huge (while the gutter on your grid holds on to a maximum of 25px.

So I kinda made my own max-margin:

 margin-bottom: 25px;
 @media (max-width: 1100px) {  margin-bottom: flex-gutter();}

First line defines the max margin, the second line sets flex-gutter if your viewport is < 1100px (my max grid size for Neat).

Would love to hear if I can implement this in a sass function!

Is there a grid system that use percentage-based width for columns and px values for gutters?

This is what I came up with. I'm not a math guy, so I can't tell you why these width equations work, or if there's a better algorithm.

https://codepen.io/richiegarcia/pen/YBEVQR

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: 0; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / 2); }
.col-1-3 { width: calc(100% * 1 / 3 - 20px / 1.5); }
.col-1-4 { width: calc(100% * 1 / 4 - 20px / 1.33); }
.col-1-6 { width: calc(100% * 1 / 6 - 20px / 1.2); }
.col-1-12 { width: calc(100% * 1 / 12 - 20px / 1.09); }

---

Related Topics