CSS GRID Layout basics

CSS GRIDS

• It's like flexbox, but in 2 dimensions.
• Very similar to tables but without all the ugly table markup.

CSS GRID Terminology

Grid Container

Grid Item

Grid Lines

• Referenced by number, starting and ending with the other borders of the grid. Starting at top left, left to right.
• You can name grid lines and reference them by their custom names.

CSS Grid Lines and Units

grid-template-columns

• Draws grid lines
• This sets the width of the columns in px, em, %, fr, etc

  grid-template-columns: 2fr 1fr 1fr;

• You can mix any measurement unit with any of the other types.

  grid-template-columns: 63px 20vw 10% 40em 42vh;

grid-template-rows

• This sets the height of the row in px, em, %, fr, etc

grid-template-rows: auto 1fr 3fr

Fraction Unit

• Represents a fraction of the available space in the container.

  grid-template-rows:1fr 1fr 2fr

• If you add another unit it will evenly divide the space in fractions.

  grid-template-columns: 20em 1fr 1fr 2fr 3fr;

So if you have "1fr 2fr," it'll divide the area into 3 sections giving the latter 66 2/3 % and the first one 33 1/3%.

mixmax() Function

Lets you define the minimum or maximum width of a column or row.

Great for responsive design.

grid-template-rows: 1fr minmax(10em, 20em)

repeat() Function

If you have a list of similar columns you can use repeat() as a shorthand notation.

grid-template-rows: repeat(2, 1fr) 2fr

You can do alternating widths by adding a additional units

grid-template-rows: repeat(2, 1fr 30px) 2fr

Placing items on the Grid

Naming your lines

• The name goes in square brackets before the unit.

.site {
     display:grid;
     grid-template-columns: [begin-edge] 2fr [halfway] 1fr [quarter] 1fr [end-edge];
     grid-template-rows: auto 1fr 3fr;
}
 .masthead {
    grid-column: halfway/end-edge
}
                

Naming Lines shorthand.

Since it can get clunky naming all your sections there is a shorthand that you can use.

.masthead {
	grid-column: main-end/sidebar;
	grid-row: 2/3;
}
.page-title {
	grid-column: main/sidebar;
	grid-row: 1/2;
}
.main-content {
	grid-column: main;
	grid-row: 2/4;
}

                

Grid Areas

• Naming lines is useful, but grid areas is way better.
• It's like naming sections on a map.
• Within the grid map, the individual cells get named areas.
• This is unlike any other CSS property. You literally draw out the areas with text.
• This is super powerful because all you need to do is move the text around to change the grid placements. This becomes especially helpful in responsive sites. All you need to do is change the template areas with media queries and your grid adjusts.
• To add an empty cell, just add a "." instead of a title.

grid-template-areas:
  "title title title"
  "main header ."
  "main sidebar footer";
                        

Grid Gap

• This only applies to the space between the grid.

  grid-gap:1em

• It can be for either column or row

  grid-column-gap:1em

  grid-row-gap:1em

grid-gap: 1em 2em

Layouts

• Embrace nested grids! Don't flatten the html
• You can change the order of cells.
• This is purely columns and rows, it should be used for traditional grids only. Something like masonry is the antithesis of a grid and it will not work.
• Resist the urge to make grid frameworks or classic x-columns grids. Make dynamic grids that fit your content. If you don't need 16 columns, don't create them.
• Find the best solution for your project.

Preparation

• Start by drafting some grids on paper.
• Draw the grid lines and identify the columns, rows, cells, and grid areas .
• Figure out nested grids.

Feature Queries

• CSS grids are available on all major browser versions.
• For older browser that do not support CSS grids, offer them the mobile layout.
• Test using CSS feature queries to see if the browser supports it.

  
   @supports (grid-area:auto) {
       ...
   }
                          

Flexbox Inheritance

• CSS Grids inherits a lot from flexbox.
• To change the content alignment inside the columns, use justify-content.
• You no longer need to use max-width and margins to center content. All you need to do is use the minmax() function and set justify-content to center

  
  grid-template-columns: 15em minmax(auto, 30em) 15em;
  justify-content: center;

Be Fancy!

You can easily do things you couldn't even dream of doing before!

Split and change locations

• Lets say you would like the sidebar to split and move into different parts of the grid for different screen sizes. Ah, but you say : "I can't do that because it's already all in one area, if I use grid-column and grid-row, it'll jump the whole section to the next placement..."

All you need is some CSS magic.

• Make the sidebar inherit the display grid styles so you create a new nested grid. Place the half bottom of the sidebar (with class .twin) into the right using grid-row and grid-column, and give the sidebar a height of 0 with overflow:visible... and voila it works.

.sidebar {
	display: inherit;
	grid-template-columns: inherit;
	grid-column: 1/4;
	grid-row: 2/3;
	height: 0;
}

.twin:last-of-type {
	grid-column: 3/4;
}

Full bleed sections

• To make full bleeds per row and contain content, only apply the grid to the areas that need it.

/* Disable fallback max-width center aligned rule: */
.site {
	max-width: none;
}

/* Four-column layout: Two center columns have total width of 50em: */
.main-area > *,
.colophon {
	display: grid;
	grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
}

/* Center items by placing them in the two center columns: */
.splash-content,
.more-content,
.buckets ul {
	grid-column: 2/4;
}

/* Use automatic grid placement + span to let each item span two columns: */
.twin,
.colophon aside {
	grid-column: 2 span;
}
                

Make cards easily.

Combine flexbox and grid to achieve full heights in the cells.

.card a {
	display: grid;
	grid-template-columns: 6em auto;
	grid-template-rows: 1fr 1fr;
	padding: 0 1em 0 0;
	text-align: left;
}
.time {
	grid-column: 1;
	grid-row: 1/3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.card h2 {
	grid-column: 2;
	grid-row: 1;
	align-self: flex-end;
}
.meta {
	grid-column: 2;
	grid-row: 2;
}

Stacking things on top of each other.

Sooo easy!!! No extra weird dom elements.

grid-column: 1;
grid-row: 1;
            

*Tip- make text align to the bottom. Use flex!

display:flex; display: flex-end;