CSS 그리드로 2차원 레이아웃 구축

6502 단어 gridcsswebdev


사진 제공: Pankaj Patel on Unsplash

이 기사를 쓰기 전에 나는 1D 레이아웃을 행 또는 열로 만들고 더 구체적으로 다음과 같이 그리드 내부의 요소에 고정 크기를 제공하기 위해 CSS Grid를 사용했습니다.

grid-template-columns: 70px 250px auto auto 370px;


또는

grid-template-rows: .5fr 1fr 1fr 1fr 1fr;


그러나 CSS Grid는 그 이상입니다. 한 번에 훌륭한 2D 레이아웃을 만드는 데 사용할 수 있으므로 어느 시점까지 응답성을 관리하는 데 도움이 되고 여러 그리드와 플렉스 박스를 사용하지 않아도 됩니다. 그리고 한 요소에서 일부 너비를 변경하려는 경우 전체가 무너지지 않도록 다른 위치에서 많은 변경을 수행해야 하기 때문에 어느 시점에서 유지 관리하기 쉽지 않은 많은 코드를 작성하지 않아도 됩니다.

다음과 같이 2D 레이아웃을 만들어 보겠습니다.



따라서 html 및 기본 css 생성부터 시작하겠습니다.

HTML

<body>
    <div class="parent">
        <div class="div1 items"> 1</div>
        <div class="div2 items"> 2</div>
        <div class="div3 items"> 3</div>
        <div class="div4 items"> 4</div>
        <div class="div5 items"> 5</div>
    </div>
</body>


CSS

*{
  margin: 0px;
  padding: 0px;
}

.parent {
  display: grid;
  height: 100vh;
  grid-template-columns: 70px 250px auto auto 370px;
  }

.div1 { background-color: lightblue; }
.div2 { background-color: lightyellow; }
.div3 { background-color: lightpink; }
.div4 { background-color: skyblue; }
.div5 { background-color: lightsalmon; }


따라서 위의 코드를 실행하면 다음과 같은 결과가 나타납니다.

매우 간단합니다 지금까지는 맞습니까? 이제 여기에 grid-template-rows를 추가하겠습니다.

.parent {
  display: grid;
  height: 100vh;
  grid-template-columns: 70px 250px auto auto 370px;
  grid-template-rows: .5fr 1fr 1fr 1fr 1fr;
  }


이제 출력은 다음과 같습니다.



흠 지금 좀 혼란스럽죠? 이 모든 요소의 높이가 어떻게 줄었습니까? 이를 이해하려면 웹 관리자로 이동하여 상위 div에 표시되는 그리드 버튼을 클릭합니다.

다음과 같은 레이아웃을 얻을 수 있습니다.


이제 이 레이아웃에서 전체 페이지가 세로선과 가로선으로 어떻게 구분되는지 확인하세요. 이제 가로선이 보이면 첫 번째 행의 높이가 다른 모든 행보다 작은 것을 볼 수 있습니다. 이는 첫 번째 행의 높이를 다음으로 설정했기 때문입니다. grid-template-rows에서 .5fr이 됩니다.

이것이 grid-template-rows가 한 일입니다. 우리가 지정한 값에 따라 전체 페이지를 나누었습니다. grid-template-rows에 더 많은 값을 추가하고 첫 번째 행의 모든 ​​요소를 ​​푸시하면 더 많은 부분으로 나눌 것입니다.

이제 재미있는 부분이 있습니다. 이제 그리드의 훌륭한 속성인 grid-area를 사용할 것입니다.

따라서 기본적으로 grid-area은 그리드 레이아웃에서 그리드 항목의 크기와 위치를 설정하는 데 사용됩니다.
grid-area에는 4개의 매개변수가 있습니다.
  • 행 시작
  • 칼럼 시작
  • 로우 엔드
  • 컬럼엔드

    • 이제 다음 네 가지 매개변수를 사용하여 레이아웃 디자인을 시작하겠습니다.

    첫 번째 요소의 경우 끝까지 내려가고 두 번째 열까지 수평으로 이동하기를 원합니다. 올바르게 수행하는 방법이 약간 혼란스럽게 들립니까? 적어도 나에게는 그랬다.
    웹 인스펙터에서 가져온 그리드 레이아웃을 살펴보겠습니다. 각 행과 열의 번호 매기기가 있음을 알 수 있습니다.



    이 숫자를 사용하여 행과 열의 시작 및 종료 위치를 추적할 수 있으므로 첫 번째 열부터 시작하면 다음과 같습니다.

    .div1 { background-color: lightblue;
        grid-area: 1/1/6/2;
       }


    여기서 그리드 영역은 다음과 같이 말합니다.
  • 행 시작 - 1
  • 열 시작 - 1
  • 행 끝 - 6
  • 컬럼 엔드 - 2

    • 따라서 다음과 같은 레이아웃을 제공합니다.



    이제 빨리 감기(두 번째 열을 직접 수행했다고 가정)하고 높이가 더 낮은 맨 위에 있는 세 번째 열로 이동합니다. 여기에는 grid area 매개변수가 있습니다.

    .div3 { background-color: lightpink;
    grid-area: 1/3/2/6;
  }


    여기에서 매개변수를 볼 수 있습니다. 행은 1에서 시작하고 2에서 끝나야 합니다. 즉, 두 번째 행에서 끝나고 열은 3에서 시작하여 6까지 계속 이동하므로 다음과 같은 레이아웃을 제공합니다.



    모든 요소를 ​​사용자 정의한 후 코드는 다음과 같습니다.

    *{
  margin: 0px;
  padding: 0px;
}

.parent {
  display: grid;
  height: 100vh;
  grid-template-rows: .5fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 70px 250px auto auto 370px;
  width: 100%;
  min-width: 0px;
  }

  .div1{
     background-color: lightblue;
     grid-area: 1/1/6/2;
    }

  .div2{ 
    background-color: lightyellow;
    grid-area: 1/2/6/3;
  }

  .div3{ 
    background-color: lightpink;
    grid-area: 1/3/2/6;
  }

  .div4{ 
    background-color: skyblue; 
    grid-area: 2/3/6/5;
  }

  .div5{ 
    background-color: lightsalmon;
    grid-area: 2/5/6/6;
  }


  .items{
    border: 3px solid black;
    min-width: 0px;
  }


    또한 이것은 내가 그것을 복제하기 위해 작업하고 있는 프로젝트인 discord의 메인 페이지의 레이아웃입니다. 그래서 몇 시간 더 작업한 후에 동일한 레이아웃을 사용하여 다음과 같은 모양이 되었습니다.



    제 Github 프로필에서 확인하실 수 있습니다.

    이 기사를 읽어 주셔서 감사합니다 :)
    Java - Excel 셀 값을 텍스트에서 숫자로 또는 숫자에서 텍스트로 변환
    100일의 코드: 2022년을 위한 완전한 Python Pro 부트캠프 - 25일차(미국 주 게임)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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