Grid 3

Here are 9 items placed on a 3 column grid. Notice the orange lines both through the grid and on the outside. These are important and are called grid line. Each one has a number. The top horizontal is number one and the one bounding the left edge is also number one. The also have a second set of numbers. These start from the bottom and the right edge and get negative values. That is the the right edge is -1 as is the bottom line bounding the edge of the box. These numbers are used to position grid items on the grid.

Here we've used those numbers to reposition grid item 5 to the first place on the grid using the declarations:

#item5 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

grid-column and grid-row are actually both shorthand for grid-column-start and grid-column-end and grid-row-start and grid-row-end.

Now lets try with negative values:

Below is set to: grid-template-columns: repeat(2, 1fr 2fr);. First column is 1fr, next is 2fr and this is laid out twice.

You can mix the repeat function with standard definitions:

grid-template-columns: 50px repeat(2, 200px) auto;

Repeat

The repeat function can be used to repeat a value when defining columns or rows: grid-template columns: 1fr 1fr 1fr 1fr can also be written as grid-template-columns: repeat(4, 1fr). This can be especially handy if you have a lot columns or rows: grid-template-rows: repeat(20, 1fr).

The repeat value can take several values, eg. grid-template-columns: repeat(5, 1fr 3fr). This will give five columns altenating between 1fr and 3fr widths:

This grid is defined in fr: grid-template-columns: repeat(5, 1fr);. But if one item needs to expand because of a long word, an image or a width definition in CSS the whole column will stretch too.

Fitting Grid items.

There are many ways to change the width (or height) something. One way is use the span value for grid-column:

grid-column: span 2

As you can see the previous example the span goes from the selected item to the next to the right. But if there's no more space to the R this is what happens (in this case the span given is 3):

Another way is to use the grid track numbers. Target a grid item in your CSS and give it the following properties:

grid-column: 2 / -1 makes the item stretch from track 2 to the very end. (item 4 below)

Alternatively you can use grid-column: span 3 / 5;. This says span 3 columns ending at track 5. (item 7)

grid-row: 3 / span 2; will span two rows starting from track 3. (item 10)

grid-auto-rows

You can define a grid without defining any rows at all. Each time a new element is added beyond the total number of columns a new implicit row is created. That is on say a four column grid a new row will be created with the fifth, ninth, thirteenth etc. element placed.

grid-auto-rows is used to define the size of these automatically inserted rows.

grid-auto-rows: can have the following values:

• auto - the default value is calculated.
• max-content
• min-content
• A measurement value, like px or ems etc.

grid-auto-columns with grid-auto-flow

By default when new grid items are added to a grid container they are added as a new row. That's because the default behaviour of grid-auto-flow is row. If grid-auto-flow is set to column instead then new items are added horizontally, like flexbox.

When set up this way using grid-auto-columns can be used to define the width of new columns.

grid-auto-columns can take a range of values like grid-template-columns: max-content, min-content, fit-content() and even minmax(). Of course regular units like percentage, fr, px ems etc. can be used too.

You can also asign multiple values. For example: grid-auto-columns: 1fr 3fr and the columns width will alternatate in size between them.

Auto-fill & auto-fit

These are useful for fixed-width items (say defined in px, or ems) and are used in place of a number value defining the number of columns. grid-template-columns: repeat(auto-fill, 70px). This saying automatically choose the number of columns (it tries to get the most into the available space), with a width of 70px.

Resize the box below to get the idea:

The difference between auto-fill and auto-fit is not obvious. The difference can be seen in the two examples below. Both have their fourth items set at: #item4: grid-column: -2 / -1;

This box is set to auto-fit. Drag the corner to expand the width.

This is set to auto-fill. When dragged to the left you can see the grid is creating extra columns and keeping item 4 slotted in the last (-2 and -1) tracks.

According to Kevin Powell auto-fit is the one you want 95% of the time.

minmax

Minmax, like auto-fill and auto-fit, is another variable in place of a numerical value. minmax can replace a figure like 150px with a minimum and maximum value. It works well with auto-fit to define the width of columns. For example:

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)). This is asking the grid to fit as many columns as it can in the space but with a width of at least 150px up to a maximum of 1fr. The fr or fractional unit is sometimes called free space unit in that it takes up any unused space. Using 1fr as the upper limit rather than a fixed value like 350px means the full width of the grid container will always be used.

With more items the behaviour is different. However if you wanted to keep four columns then that could be defined instead of auto-fit.

One minor issue that could crop up is where the smallest minmax value (150px here) needs to be larger but not larger than the width of the screen. You can use a min function here instead:

grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr)

justify-content

This property works the same as in flexbox. It’s applied to the grid container.

justify-content: start;

Obviously it only has effect if there is space left over, which implies setting column widths in pixels.

It can take the following values

• space-between
• space-around
• space-evenly
• start
• center
• end

space-evenly is different to space-around. The gaps between columns are equal in size, including the gaps at each end.

fit-content

fit-content can be used in place of a numerical value or using auto or minmix.

This sets the biggest size the cell can be but making it smaller if the text allows. Seems to be like minmax without a min value.

Example: grid-template-columns: fit-content(150px) 150px 150px;

.resources > ul > li:nth-child(4), aside > ul > li:nth-child(4) {
  padding-bottom: .7em;
  border-bottom: solid 1px;
}

.grid {
  font-size: .5em;
  display: grid;
  grid-gap: 2px;
  width: 45%;
  margin: 0 0 7em 0;
  background: var(--headercolor);
  border: solid 2px var(--headercolor);
  resize: both;
  overflow: auto;
  cursor: nw-resize;
}
/* .grid::after {
  content: attr(id);
} */
.nine {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.griditem {
  background: #58b6ed;
  color: var(--container-bg);
  padding: .5em;
  text-align: center;
}
#g1 #item5, #g2 #item5, #g3 #item5 {
  background: steelBlue;
}
#g2 #item5 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#g3 #item5 {
  grid-column: -2 / -1 ;
  grid-row: -1 / -2;
}
#g4 {
  grid-template-columns: repeat(2, 1fr 2fr);
}
#g5 {
  grid-template-columns: 50px repeat(2, 200px) auto;
}
#g5 #item1, #g5 #item2, #g5 #item3, #g5 #item4 {
  font-weight: bold;
  font-size: 1.3em;
  font-family: 'Segoe ui';
  color: black;
}
#g6 {
  grid-template-columns: repeat(5, 1fr 3fr);
}
#g7, #g8, #g9, #g10 {
  grid-template-columns: repeat(5, 1fr);
}
#g8 #item9 {
  background: steelBlue;
  grid-column: span 2;
}
#g9 #item9 {
  background: steelBlue;
  grid-column: span 3;
}
#g10 #item4 {
  grid-column: 2 / -1;
}
#g10 #item7 {
  grid-column: 3 / 5;
}
#g10 #item10 {
  grid-row: 3 / span 2;
}
#g10 #item4 {
  grid-column: 2 / -1;
}

#g11, #g12, #g13, #g14 {
  grid-template-columns: repeat(auto-fill, 130px);
}
#g11 #item4, #g12 #item4 {
  grid-column: -2 / -1;
}
#g12 {
  grid-template-columns: repeat(auto-fit, 130px);
}

#g13 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}


/* #g15 {
  grid-template-columns: 3fr 1fr;
  grid-auto-rows: auto;
} */
#g15 {
  grid-template-columns: fit-content(200px) 200px 200px;
}
/* not understaning auto-rows right now. Scratch it all out
h2:nth-of-type(3) + p {
  text-decoration: line-through;
} 
 */
#g16 {
  margin-top: 1em;
  grid-template-columns:1fr 2fr 1fr;
  grid-template-rows: repeat(3, 70px);
  grid-gap: 5px;
  font-weight: bold;
  grid-template-areas:
      "header header header"
      "main main aside"
      "footer footer footer";
}
#g17 {
  margin-top: 1em;
  grid-template-columns:1fr 2fr 1fr;
  grid-template-rows: repeat(3, 70px);
  grid-gap: 5px;
  font-weight: bold;
  grid-template-areas:
      "header header header"
      "main main aside"
      "footer footer footer";
}
#g17 #item1 {grid-area: header}
#g17 #item2 {grid-area: main}
#g17 #item3 {grid-area: aside}
#g17 #item4 {grid-area: footer}