I saw Jacqueline Quintanilla speak on CSS Grid at the Twin Cities .NET User Group on Wednesday night.

Serilog, a .NET means of logging which allows you to have a "sink" which writes event logs to perhaps Seq, a log server, was brought up before Ms. Quintanilla began to present, but otherwise this presentation had little to do with .NET in specific. It was really just a talk on modern CSS capabilities. To quote Jacqueline Quintanilla verbatim "The internet at its core is inherently flexible." and CSS Grid certainly makes the most of that. You don't have to explicitly have a twelve column wide grid system as is the case in rival approaches (think Bootstrap) and you may have elements explicitly overlapping other elements! In its simplest form you will have a div wrapping a set of other divs, or perhaps an article wrapping a set of sections, etc. The outermost actor's style starts out like so:

.wrapper {
   display: grid;
   grid-template-columns:

 
 

A series of n number of measurements will be the setting for grid-template-columns and 300px 2fr 1fr; for example would define a layout that has three columns for its three settings. The first of the columns, the leftmost, is a fixed three hundred pixels in width and the next two fractional units and the last/rightmost one fractional unit. Fractional units are newish, distributing space in what is leftover space. If you can imagine three hundred pixels less than one hundred percent then the middle column gets two third of that and the right column the remaining third. You may also have a grid-template-rows setting too, but you don't strictly have to. This will break the grid up into the predictable tables and cells you might expect, but there is another way to approach this without defining rows. You may break things up into other rectangular areas, but as of yet there is no support for an L-shape. In terms of, well, terminology, grid tracks are either rows or columns and grid lines are the invisible lines separating these. Grid cells are the individual cells that grid lines make when they cross over each other. gap: 20px; as a setting on the outermost actor is going to fatten the invisible lines to be twenty pixels across, spacing the grid elements away from them. You may give names to grid lines likes so:

.wrapper {
   display: grid;
   grid-template-columns: [start] 300px [main] 2fr [bob] 1fr [end];
   grid-template-rows: [nav] 150px [row2] 150px;
}

 
 

...and then turn around and use the names like this:

.one {
   grid-column: main/end;
   grid-row: row2;
}

 
 

I asked Jacqueline if this sort of positioning meant that divs nested in the div that gets .wrapper on it could in any particular order with perhaps the only way order might affect things being who overlays who in an overlaying effect and she affirmed my suspicion. Here is one of the before mentioned alternatives to explicitly defining rows:

.wrapper {
   display: grid;
   grid-template-columns: 200px 2fr 1fr;
   grid-template-areas:
      "nav nav nav"
      "aside main main"
      "aside info1 info2"
      "footer footer footer";
   gap: 20px;
}
.one {
   grid-area: nav;
   border: 1px solid #FF0000;
   color: #FF0000;
   padding: 10px;
}
.two {
   grid-area: main;
   border: 1px solid #00FF00;
   color: #00FF00;
   padding: 10px;
}
.three {
   grid-area: aside;
   border: 1px solid #0000FF;
   color: #0000FF;
   padding: 10px;
}
.four {
   grid-area: info1;
   border: 1px solid #FFFF00;
   color: #FFFF00;
   padding: 10px;
}
.five {
   grid-area: info2;
   border: 1px solid #00FFFF;
   color: #00FFFF;
   padding: 10px;
}
.six {
   grid-area: footer;
   border: 1px solid #FF00FF;
   color: #FF00FF;
   padding: 10px;
}

 
 

This ends up looking like this:

one/nav

two/main

three/aside

four/info1

five/info2

six/footer

 
 

If you don't want to make up your own funny names for grid lines you may just call them out numerically like so:

.grid-item {
   grid-column: 1/3;
   grid-rows: 2/3;
}

 
 

Negative numbers may be used too. The last item is -1 and the second to last -2 and so on. The number 0 means nothing in this context. We either starting counting rightwards or downwards from one or leftwards and upwards from negative one. Jacqueline namedropped the dense keyword, but I don't really understand how to use it. It is used with the grid-auto-flow property which could be set to row or could be set to column or could be set to row dense perhaps per my Googling. I think, as best as I can tell, this biases how things wrap if there are not columns specified. You may use minmax effects like so wherein the first setting is the minimum sizing and the second setting is the maximum amount of growth:

.wrapper {
   display: grid;
   grid-template-columns: 200px minmax(100px, 1fr) minmax(200px, 400px);
   grid-template-rows: 150px 150px;
}

 
 

justify-items is explained by this slide better than I could articulate it in words.

 
 

justify-content is similarly on exposition here. Both above and below stretch is the default.

 
 

More wackiness with justify-content below...

 
 

Firefox Grid Inspector was a recommended tool to use to troubleshoot (Firefox lives!) and Jen Simmons and Rachel Andrew are recommended blogging authors to follow in this space.