CSS Grid

This repo houses a number of tutorials for using CSS Grid.

Using the grid

Size can be any valid CSS unit px, vw, auto that enables a column or row to stretch across available space

For example grid-template-column: 10px auto will create a 10px column followed by a second column that fills all available space

fr is a fractional unit that causes any remaining space to be distributed to columns or rows based on the ratios of these units

grid-template-rows: 1fr 2fr

creates two dynamic rows with the second twice the size of the first,

grid-template-columns: 1fr 1fr 1fr 1fr

Defines four equal-sized columns

The repeat()function can be used to make the above less verbose repeat(4, 1fr)

More complex layouts

Grids with unequal sized cells can be created by combining the different units mentioned. We can also use the minmax() function to define a minimum and a maximum size for dynamic columns and rows.

grid-template-rows: 40px 2fr repeat(2, minmax(75px, 1fr))

Creates four rows with the first 40px tall, the other three stretch over remaining space in a 2:1:1 ratio. The last two having a minimum height of 75px which sets the minimum height of the second row at 150px.

Layout

Accessing the grid

INSERT IMAGE OF GRID LINES

We can consider this now to be a 2 x 2 array indexed at 1 and accessible with a negative index if necessary. For example a 4 x 4 Grid will have the first column accessible at either index 1 or -5. They can be used as the boundary lines for elements placed in them.

NOTE We can also assign a name to index by adding a string in square brackets in the property declarations

gird-template-rows: [first-row] 1fr [second-row] 1fr [last]

Positioning elements inside the grid

THIS IS GONNA HAVE TO BE REWRITTEN

Similar to flexbox, the horizontal and vertical position of items placed in the grid can be controlled by setting justify-items and align-items respectively to start, center, or stretch.

The same control of grid column and row positions with in a larger container (grid inside a grid) can be applied used the justify-content and align-content properties and the start, center, or stretch values. The additional value space-between or space-around is used to divide extra space between columns/rows. space-evenly can used to divide extra space evenly between columns/rows with the same or half the amount of space on the ends.

We can also define align-content and justify-content(in that order) using place-content. Values of align-items and justify-items can be defined with place-items WTF THIS GUY CAN'T WRITE

Positioning items in the Grid using line numbers

To place an item in the grid we can set it's grid-column-start and grid-column-end properties between which the item should be stretched. For rows the properties are grid-row-start and grid-row-end

#item1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: -1;
}

#item2 {
  grid-column: 3;
  grid-row: 1;
}