그리드 연습

17779 단어 gridcss
저는 플렉스를 더 많이 사용해 왔으며 플로트나 그리드를 실제로 사용하지 않았습니다. 코드를 작성할 때 더 자주 사용하도록 노력해야겠다는 생각이 듭니다.

그리드는 콘텐츠를 열과 행으로 모두 구성할 수 있으므로 복잡한 레이아웃에 적합합니다.
플렉스와 마찬가지로 그리드에도 그리드 컨테이너와 컨테이너의 자식인 그리드 항목이 있습니다. 따라서 컨테이너의 전체 공간이 그리드의 영향을 받고 각 항목의 속성과 값에 따라 레이아웃이 변경됩니다.
display: grid in container로 지정할 수 있습니다.


https://studiomeal.com/archives/533의 이미지



그리드 트랙은 그리드의 행과 열이며, 그리드 셀은 그리드의 셀입니다. 그리드 선은 그리드 셀을 나누는 선입니다. 그리드를 사용하려면 먼저 컨테이너에 작성합니다.

.container {
    display: grid;
    /* display: inline-grid; */
}


그러나 (격자) 항목이 블록 요소인 경우에는 아무 것도 변경되지 않습니다. Inline-grid는 inline-block처럼 작동합니다.
grid-template-rows , grid-template columns : 그리드 트랙의 크기를 지정합니다.

.container {
  grid-template-columns: 200px 200px 500px;
  /* grid-template-columns: 1fr 1fr 1fr */
  /* grid-template-columns: repeat(3, 1fr) */
  /* grid-template-columns: 200px 1fr */
  /* grid-template-columns: 100px 200px auto */

  grid-template-rows: 200px 200px 500px;
  /* grid-template-rows: 1fr 1fr 1fr */
  /* grid-template-rows: repeat(3, 1fr) */
  /* grid-template-rows: 200px 1fr */
  /* grid-template-rows: 100px 200px auto */
}


fr = 분수. (비율로 보시면 됩니다)grid-template-columns: 1fr 1fr 1fr; 인 경우 1:1:1인 세 개의 열을 만듭니다.grid-template-columns: 100px 2fr 1fr; 인 경우 왼쪽의 첫 번째 열은 100px로 설정되고 두 번째 및 세 번째 열은 2:1 비율로 설정됩니다.

반복하다




.container {
  grid-template-columns: repeat(5, 1fr);
  /* The code above is the same as below */
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}



https://studiomeal.com/archives/533의 이미지



/* These two select the same area */

.item:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

.item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}


그리드 영역




<!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>flex-1</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container-color {
            background-color: cornsilk;
            border: solid 3px black;
            border-radius: 10px;
            margin: 5px;
            padding: 5px;
        }

        .item-color {
            background-color: darkcyan;
            border: solid 3px black;
            border-radius: 10px;
            margin: 5px;
            padding: 5px;
        }

        .container {
            display: grid;
            border: 10px solid black;
            gap: 10px;
            grid-template-areas:
                'header header header'
                'section section section'
                'footer footer footer';
        }

        .header {
            grid-area: header;
            border: 10px solid tomato;
        }

        .section {
            grid-area: section;
            border: 10px solid blue;
        }

        .footer {
            grid-area: footer;
            border: 10px solid deeppink;
        }

    </style>
</head>

<body>
    <div class="container-color container">
        <div class="item-color item header">Lorem.</div>
        <div class="item-color item section">Lorem, ipsum.</div>
        <div class="item-color item footer">Lorem ipsum dolor sit.</div>
    </div>
</body>

</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>flex-1</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container-color {
            background-color: cornsilk;
            border: solid 3px black;
            border-radius: 10px;
            /* height: 500px; */
            margin: 5px;
            padding: 5px;
        }

        .item-color {
            background-color: darkcyan;
            border: solid 3px black;
            border-radius: 10px;
            margin: 5px;
            padding: 5px;
        }

        .container {
            display: grid;
        }

        .header {
            grid-row: 1 / 2;
            grid-column: 1 / 4;
        }

        .section {
            grid-row: 2 / 3;
            grid-column: 1 / 3;
        }

        .aside {
            grid-row: 2 / 3;
            grid-column: 3 / 4;
        }

        .footer {
            grid-row: 3 / 4;
            grid-column: 1 / 4;
        }
    </style>
</head>

<body>
    <div class="container-color container">
        <div class="item-color item header">Lorem.</div>
        <div class="item-color item section">Lorem, ipsum.</div>
        <div class="item-color item aside">Lorem, ipsum dolor.</div>
        <div class="item-color item footer">Lorem ipsum dolor sit.</div>
    </div>
</body>

</html>


그리드 연습




code
위 코드의 일부 문제
  • 요소에 변환이 있는 경우 z-색인이 무시되고 배경 카드가 다른 요소보다 맨 앞에 옵니다.
    따라서 transform: translate()를 사용하는 대신 top과 left를 사용하여 요소를 이동합니다.
  • 읽을 거리: Why z-index isn't working?
    in Korean

    • + 개발자 도구에서도 그리드를 확인할 수 있습니다.





    CSS 그리드를 연습하는 게임



    CSS Grid garden
    Xcode 7로 업데이트하면 OpenFrameworks와 관련된 프로젝트를 구축할 수 없는 문제
    JavaScript 동작원리(stack, queue, event loop) & 비동기 프로그래밍이 가능한 이유

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage