What Is a CSS Grid System

What is a CSS grid system?

I would recommend you reading Which CSS Grid Framework Should You Use for Web Design? over on NetTuts.

It goes into depth and answers the questions you have, as well as a comparison of some of the CSS frameworks out there.

They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.

Quoted from the link I attached with regards to print publishing layout grids. But in the context of the Web world (CSS) grid systems allow you to create complex CSS grid layouts instead of html table layouts.

How does css grid layout works

W3C docs and this article can help you understand why grid works this way.

Let's look at how grid-items are placed according to 8.5 Grid Item Placement Algorithm in docs:

0. Generate anonymous grid items

No anonymous items - none grid items generated

1. Position anything that’s not auto-positioned.

On this step only element 4 is positioned

grid-column-start: 2; /* second column, span 1 */
grid-row-end: 4;      /* third row, span 1 */

2. Process the items locked to a given row.

There are no items locked to specific row, so none positioned

3. Determine the columns in the implicit grid.

Number of columns in your explicit grid is 3.
There are no items that will need more than 3 columns - elements 1,2 and 4 do not need more than 3, all the rest have no explicit columns specified, which means that number of columns in your implicit grid is 3

4. Position the remaining grid items.

In your case algorithm works according to default “sparse” packing:

Set the column-start line of its placement to the earliest (smallest
positive index) line index that ensures this item’s grid area will not
overlap any occupied grid cells and that is past any grid items
previously placed in this row by this step.

At this point you have five elements yet to be positioned: 1,2,3,5 and 6.
Auto-placement cursor now is on start-most row and column, that is row 1 and column 1. Step by step explanation how all remaining items are placed:

Position element 1 (definite column position) in row 1, col 1-2, Auto-placement cursor moves to row 1 column 3.
Position element 2 (auto-position on both axis) in row 1, col 3, Auto-placement cursor moves to row 2 column 1 since there are only 3 columns.
Position element 3 (definite column position) in row 2, col 2, Auto-placement cursor moves to row 2 column 3.
Position element 5 (auto-position on both axis) in row 2, col 3, Auto-placement cursor moves to row 3 column 1.
Position element 6 (auto-position on both axis), Auto-placement cursor is on row 3 column 3.

If you want element 5 to go behind 3, you have two ways of doing it:

Solution 1: set `grid-auto-flow: dense;`

This way after placing element 3 Auto-placement cursor's will go to start-most row and column lines in the implicit grid - which is row 2 column 1.

Same will happen with element 6, so it'll be placed in row 2 column 3.

html,body {  width: 100%;  height: 100%;  display: flex;  justify-content: center;  align-items: center;}
.wrapper {  display: grid;  grid-auto-flow: dense;  grid-template-columns: 100px 100px 100px;  grid-template-rows: 50px 50px 50px;}
.wrapper div {  display: flex;  align-items: center;  justify-content: center;  font-weight: 700;  color: white;}
.wrapper div:nth-child(1) {  background-color: blue;  grid-column-start: 1;  grid-column-end: 3;}
.wrapper div:nth-child(2) {  background-color: red;}
.wrapper div:nth-child(3) {  background-color: green;  grid-column-start: 2;  grid-column-end: 3;}
.wrapper div:nth-child(4) {  background-color: lightblue;  grid-column-start: 2;  grid-row-end: 4;}
.wrapper div:nth-child(5) {  background-color: pink;}
.wrapper div:nth-child(6) {  background-color: lightgreen;}

<div class="wrapper">  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div>  <div>6</div></div>

CSS grid layout with span and *ngFor number of columns

You can do it like so:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.my-grid {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: 1fr 1fr;
  width: 900px;
  min-width: max-content;
  text-align: center;
}

.my-grid>* {
  height: 300px;
  display: grid;
  place-items: center;
  border: 1px solid black;
}

.dynamic {
  display: flex;
}

.dynamic>div {
  border: 1px solid black;
  width: 300px;
  height: 100%;
  display: grid;
  place-items: center;
}

<div class="my-grid">
  <div class="A">
    A
  </div>
  <div class="B">
    B
  </div>
  <div class="C">
    C
  </div>
  <div class="D">
    D
  </div>
  <div class="dynamic">
    <div>E</div>
    <div>E</div>
    <div>E</div>
    <div>E</div>
  </div>
  <div class="F">
    F
  </div>
</div>

Grid system as in excel

simply apply your own css. Give the container the attribute and value: display: grid; to use the css-grid system. Then use grid-template-columns: repeat(7, min-content); to use 7 columns with the width of the content. Replace the 7 with the number of columns you want.

.container {
  display: grid;
  grid-template-columns: repeat(7, min-content);
  grid-gap: 5px;
  margin: 0 auto;
  width: min-content;
}

.container div {
  background-color: green;
  color: white;
  padding: 10px;
  text-align: center;
  width: min-content;
}

<div class="container">
  <div>G01 08:00</div>
  <div>G02 08:00</div>
  <div>G01 08:15</div>
  <div>G02 08:15</div>
  <div>G01 08:30</div>
  <div>G02 08:30</div>
  <div>G01 08:45</div>
  <div>G02 08:45</div>
  <div>G01 09:00</div>
  <div>G02 09:00</div>
  <div>G01 09:15</div>
  <div>G02 09:15</div>
  <div>G01 09:30</div>
  <div>G02 09:30</div>
  <div>G01 09:45</div>
  <div>G02 09:45</div>
  <div>G01 10:00</div>
  <div>G02 10:00</div>
  <div>G01 10:15</div>
  <div>G02 10:15</div>
  <div>G01 10:30</div>
  <div>G02 10:30</div>
  <div>G01 10:45</div>
  <div>G02 10:45</div>
  <div>G01 11:00</div>
  <div>G02 11:00</div>
  <div>G01 11:15</div>
  <div>G02 11:15</div>
  <div>G01 11:30</div>
  <div>G02 11:30</div>
  <div>G01 11:45</div>
  <div>G02 11:45</div>
</div>

In Figma: How to specify layouts for CSS grid systems?

No, according to an answer on Figma's own forum, Figma's columns cannot behave akin to a CSS grid system, even though “several threads [have] requested [this] evolution”.

Create CSS grid layout with pure CSS

You can try like below. You were almost good, missing grid-auto-flow:dense; to allow the item to fill all the spaces.

.grid-container {
  padding: 20px;
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow:dense;
  counter-reset: albumList;
}

.item {
  aspect-ratio: 1;
  background: #ccc;
  display: flex;
}

/* Number */
.item:before {
  counter-increment: albumList;
  content: counter(albumList);
  margin: auto;
  font-size: 40px;
  color: #000000;
}

@media screen and (min-width: 40em) and (max-width: 63.99875em) {
  /* 640 ~ 1023 */
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .item:nth-child(6n + 1),
  .item:nth-child(6n + 6){
    grid-area: span 2/span 2;
  }
  .item:nth-child(6n + 5) {
    grid-column: 1;
  }

}

@media print, screen and (min-width: 64em) {
  /* 1024+ */
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
  .item:nth-child(10n + 1),
  .item:nth-child(10n + 10){
    grid-area: span 2/span 2;
  }
  .item:nth-child(10n + 8) {
    grid-column: 1;
  }
  .item:nth-child(10n + 9) {
    grid-column: 2;
  }
}

<div class="grid-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 class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

What Is a CSS Grid System