CSS basic 7 - Grid
Tags: css, grid
Published: 2021-11-08 14:59:26


#Grid
Defines the element as a grid container and establishes a new grid formatting context for its contents.
*You can check the grid more clearly on firefox.
- display: grid
generates a block-level grid
- display: inline-grid;
generates an inline-level grid; (it behaves like inline-block)
```css
.container {
  display: grid;
  /* display: inline-grid; */
}
```

- grid container: the outer area of grid.
- grid item: the children of grid container.
- grid track: row or column of grid.
- grid line: line the defines each grid cells.
- grid number: number of each grid's line.
- grid gap: space between each grid cells.
- grid area: all set of grid cells.

#Grid row / column
Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

grid columns: The vertical lines of grid items are called columns.
grid rows: The horizontal lines of grid items are called rows.
- grid-template-columns
sets the number of columns and size of the columns in a grid.
- grid-template-rows
sets the number of rows and height of the rows in a grid.

```css
.container {
  grid-template-columns: 1fr 1fr 1fr;
  /* grid-template-columns: 1fr 50px 1fr 1fr; */
  /* grid-template-rows: 100px 1fr; */

  /* make columns of 200px, 2fr(2/3 of what's left which is total - 200px), 1fr(2/3 of what's left) */
  grid-template-columns: 200px 2fr 1fr;
}
```

#Gap
grid-gap, gap: Sets the gap between rows and columns.
grid-row-gap: Sets the size of the gap between the rows in a grid layout. 0 is the default value
grid-column-gap: Sets the size of the gap between the columns in a grid layout. 0 is the default value

```css
/* Set the gap between rows to 20px, and the columns to 50px */
.grid-container {
  grid-gap: 20px 50px;
}
```

```css
/* repeat 3 times of 1fr */
grid-template-columns: repeat(3, 1fr);

/* this is the same as above */
grid-template-columns: repeat(1fr 1fr 1fr);

/* you can also write like this */
repeat(3, 1fr 4fr 2fr);                       
```

#Selecting area of cells
- grid-column-start
- grid-column-end
- gird-column
- grid-row-start
- grid-row-end
- gird-row

```html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="reset.css">
    <style>
        ul {
            display: grid;
            height: 100vh;
            grid-template-columns: repeat(5, 1fr);
        }

        li {
            border: 1px solid black;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .first {
            grid-column: 1/4;
            grid-row: 1/3;
        }

        .second {
            grid-column: 4/6;
            grid-row: 1/4;
        }

        .third {
            grid-column: 1/3;
            /* grid-row: 3/4; */
        }

        /* .fourth {
            grid-column: 3/4;
            grid-row: 3/4;
        } */

        .fifth {
            grid-column: 1/3;
            grid-row: 4/6;
        }

        .sixth {
            grid-column: 3/6;
            grid-row: 4/6;
        }
    </style>

</head>

<body>

</body>
<!-- ul>li{$}*25 -->
<ul>
    <li class="first"><img src="image-grid/1.jpg" alt="">1</li>
    <li class="second"><img src="image-grid/6.jpg" alt="">2</li>
    <li class="third"><img src="image-grid/2.jpg" alt="">3</li>
    <li class="fourth"><img src="image-grid/5.webp" alt="">4</li>
    <li class="fifth"><img src="image-grid/3.webp" alt="">5</li>
    <li class="sixth"><img src="image-grid/4.jpg" alt="">6</li>

</ul>

</html>
```
*find more about [grid in Korean](https://studiomeal.com/archives/533)/[in English](https://www.google.com/search?q=tricks+css+grid&oq=tricks+css+grid&aqs=chrome.0.0i19j0i5i19i30l2j0i8i19i30l2j69i60l3.4457j0j1&sourceid=chrome&ie=UTF-8)