DEV Community

Dahye Ji
Dahye Ji

Posted on

CSS basic 7 - Grid

#css #grid

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) 
.container {
  display: grid;
  /* display: inline-grid; */
}
Enter fullscreen mode Exit fullscreen mode
  • 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. 
.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;
}
Enter fullscreen mode Exit fullscreen mode

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

/* Set the gap between rows to 20px, and the columns to 50px */
.grid-container {
  grid-gap: 20px 50px;
}
Enter fullscreen mode Exit fullscreen mode 
/* 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);
Enter fullscreen mode Exit fullscreen mode

Selecting area of cells

  • grid-column-start
  • grid-column-end
  • gird-column
  • grid-row-start
  • grid-row-end
  • gird-row 
<!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>
Enter fullscreen mode Exit fullscreen mode

*find more about grid in Korean/in English

Top comments (0)