Emmet

First we create a div with the class *container* with 10 different
divs inside with the class *Item*.

emmet .container>div.Item*10

should create:
----
<div class="container">
  <div class="Item"></div>
  <div class="Item"></div>
  <div class="Item"></div>
  <div class="Item"></div>
  <div class="Item"></div>
  <div class="Item"></div>
  <div class="Item"></div>
  <div class="Item"></div>
  <div class="Item"></div>
  <div class="Item"></div>
</div>
----

If you want 30 divs with the class name in sequential order and the content inside in sequential order use $.
----
.item${$}*30{$}
----

To start our grid, in the CSS we modify *container* by giving it
----
display: grid;
----

To modify its columns and rows which are called tracks. Tracks are numbered
not by the column itself, but actually by the line that starts and stop. So we'll always
have one more number than we've actually set.

With the 10 different divs, we can control it with this:

rid-template-columns: 300px 200px;
That will give it 2 columns. 1st column is 300px and the 2nd column is 200px.

We can also control its rows:
grid-template-rows: repeat(2, 200px);
Here we will repeat the first two rows 200px.

grid-gap: 20px
This will give it a padding around the boxes 20px.

Knowing the difference between explicit and implicit


When there is a 2x2 grid and we set the two columns to be

grid-template-columns: 200px 400px

Explicit: we have explicitly set the columns to be 200px and 400px.
Implicit: the Rows would be implicit because we didn't set anything for it.

If we added:

grid-template-rows: 200px 400px

Then the columns and rows would be explicit.

Now the good thing to know with implicit is that, if we've explicitly
set rows or columns but was too lazy to set the extra ones that are
created after that, we can just use *auto*.

grid-auto-rows: 100px;
grid-auto-columns: 100px;

In firefox, you can only pass 1 value for implicit, but you can add more than 1 for chrome.

By default any extra columns that aren't set will be turned into a row automatically.
grid-auto-flow: row;

However, if you want it to actually create another column instead, you can type:
grid-auto-flow: column;

When defining the size to use grid and you want to give the 2nd or third the etc space, you
use 1fr.
for example:
grid-template-columns: 100px 200px 1fr;

if you use 1fr together with another 1fr, they will split with each other evenly.
grid-template-columns: 1fr 1fr;
will have a complete half and half layout.
If you want the first fr to have 2/3 of the layout, then you can set it 2fr.
grid-template-columns: 2fr 1fr;

fr only works for column's view, and only works with row's content.

You can also use auto which will automatically set the width for content.


If you want a div item to take up more spots, you set it with *span*.
Example:
----
grid-column: span 2;
----
That will use up two of the column spots following after it if there's
no space, then it will go to the next row. This will work with rows as well:

grid-row: span 2;

instead of span (or use it with span), you can use grid-column-start/end and grid-row-start/end to
control how large and actually control where it gets placed using the grid's track.
----
      grid-column-start: 3;
      grid-column-end: 10;
      grid-row-start: 1;
      grid-row-end:9;
----
shorthand
----
grid-column: 3 / 10;
grid-row: 1 / 9
----

if you want it to end at the very end but not sure what it'll be, you can use *-1*.

----
grid-column: 1 / -1;
----

Another thing to use with repeat() instead of giving it a number of items to use,
we can use *auto-fill* which will input whatever is in there to fill the whole page no
matter the resize.

when using repeat, we learned about auto-fill, and the second parameter is the size in px or something else.
There's a more convenient thing to use which is minmax(minimum, maximum). That way when you resize the window, it won't
cut anything off but will just send it to a new row.

auto-fill, minmax(150px, 1fr);

will keep it at 4 indexes but small.

auto-fit, minmax(150px, 1fr);
will try to take up the whole space with the 4 divs.

if you like to use auto, there's also fit-content that will give a maximum.