이 블로그 글은 당신이 익숙하지 않을 수 있는 몇 가지 새로운 용어를 소개합니다.griddazzle,gridify, 그것을 사용하여'griddy '를 얻는 등입니다. 상하문 단서를 사용하여 이러한 정의를 정의하는 것을 권장합니다.
솔직히 말하면 CSS 격자가 페이지 레이아웃을 파악한 후에 나도 flexbox의 철봉이었다.비록 웨스 보스의 CSS 격자 수업(still the best resource hands-down if you're new to Grid!)에 참가한 후에도 나는 나의 방식을 바꿀 필요가 없다고 생각한다.물론 flexbox는 때때로 <div>이나 두 개의 레이아웃이 추가로 있어야만 정상적으로 작동할 수 있다...그런데 고장이 나지 않았다면 왜 고쳤을까?
그럼에도 불구하고 나는 내 사이트의 일부 선택 구역에서 CSS 격자를 실현하도록 천천히 강요했다.현재 1년 동안의 실험과 점점 격식화된 사용을 통해 저는 CSS의 깔끔한 구석을 발견했습니다. 그에 비해 flexbox는 하기 어렵습니다.
flexbox와 Grid를 비교한 게시물은 간략한 예시를 사용하기도 하지만 이런 예시들은 flexbox 결함의 핵심에 닿지 않는다.그래서 모든 Flexer를 설득하여 암흑면에 넣기 위해 다음과 같은 구체적인 예들이 있다. 내 경험을 보면 CSS 격자는 실제적으로 훨씬 간단하다.

1. 배치를 다시 정렬해야 할 때

데스크탑/노트북 사용자에게는 2열의 레이아웃이 있고 좁은 화면을 사용할 수 있도록 한 열로 잘 포장되어 있기를 바랍니다.
팀 모델을 빠르게 훑어보면 일반적인 탄력적인 리듬에 들어가서 끝낼 수 있습니다.

<div class="outer-container">
    <div>...column 1 content</div>
    <div>...column 2 content</div>
</div>

<style>
    .outer-container {
        /* create flexbox with a single row */
        display: flex;
        justify-content: space-between;
    }

    @media (max-width: 800px) {
        .outer-container {
            /* wrap columns on top of each other for mobile */
            flex-direction: column;

            /* alternatively, you can remove the flexbox entirely
            and let the columns wrap naturally */
            display: block;
        }
    }
</style>

편하게 해!많은 용례에 있어서 이것은 일을 잘 할 수 있을 것이다.
하지만 때때로 당신의 디자인팀은 다른 생각을 할 때가 있습니다.다음 레이아웃을 고려하여 데스크톱과 이동 모델을 동시에 구현합니다.

그럼 재미없어.제목과 이미지의 순서를 뒤바꿔야 할 뿐만 아니라 첫 번째 열의 마지막 요소("find us in person"주소)를 두 번째 열의 끝으로 이동해야 합니다.이건 플렉스박스 관에 있는 못이야.😕

신나게 놀 때가 됐어요.

겁먹지 마!CSS 그리드의 세련된 솔루션: grid template areas✨
이 도구를 사용하면 레이아웃에서 각 HTML 요소에 고유한 영역을 지정할 수 있습니다.그리고 격자 용기에 모든 구역을 최종 레이아웃의 위치에 넣기로 결정합니다.이것은 디지털 회화와 비슷하지만 격자화되었다.
다음은 위의 레이아웃을 구현하는 방법의 예입니다.

<!-- First, put all our elements on the page. -->
<!-- Notice we don't need wrapper <div>s for each column anymore! -->
<div class="outer-container">
    <h1>Contact Us</h1>
    <p class="tagline-text">Want to learn more...</p>
    <img src="/static/contact-us.jpg" alt="People flying around with laptops" />
    <div class="address-container">...</div>
    <form>...</form>
</div>


<style>
  .outer-container {
    display: grid;
    /* use template-areas to define the structure of our 2 column page */
    /*                                        col 1 | col 2                                                          */
    grid-template-areas:  "header   header" /* row 1 (just the header h1) */
                          "tagline  form" /* row 2 (tagline text, start of form) */
                          "image    form" /* row 3 (image, form continues) */
                          "address  form"; /* row 4 (address, end of form) */
  }
  /* assign each element to  a unique area on our grid */
  h1 {
        grid-area: header;
  }
  p.tagline-text {
    grid-area: tagline;
  }
  img {
    grid-area: image;
  }
  form {
    grid-area: form;
  }
  .address-container {
    grid-area: address;
  }

  @media (max-width: 800px) {
    .outer-container {
      /* rearrange our grid on mobile, now using a 1 column layout */
      grid-template-areas: "image"
                           "header"
                           "tagline"
                           "form"
                           "address";
    }
  }
</style>

좋아요!우리는 자신의 의사에 따라 요소의 위치를 정의할 수 있을 뿐만 아니라 지역 이름을 사용하여 CSS의 레이아웃을 표현적으로 해석할 수 있다.
물론 우리는 정확한 간격(2열 격자 안의 각 줄의 높이, 열 사이의 간격 등)을 얻기 위해 마무리 작업을 해야 한다.따라서 전체 모델이 어떻게 완성되었는지 알고 싶으면 생산 완료 on our GitHub repo for bitsofgood.org을 볼 수 있습니다😁
액세스 가능성 설명: CSS 격자선은 페이지에서 요소의 시각적 순서를 변경하지만 DOM에서 요소의 실제 순서는 변경하지 않습니다.따라서 모바일 장치에서 주소 용기를 끝까지 포장할 때, HTML의 폼 요소 위에 나타납니다.우리의 경우, 이것은 큰 문제가 아닐 것입니다. 그러나, 당신이 우리 자신의 사이트에서 텍스트 상자를 다시 정렬하기 전에, 이것은 화면 리더가 곤혹스러워하지 않도록 하십시오.

2.어떤 식으로든 일을 중심으로 하고 싶을 때

예쁜 카드 용기를 만들기 위해 나는 이미 몇 번이나 이런 상황을 만났는데, 화면의 넓이에 따라 동적으로 줄을 바꾸었다.이 난제는 말로 설명하기 어려우므로 시각적으로 이 문제를 이해하자.

좋습니다. 따라서 우리의 카드 용기는 항상 페이지의 중심을 유지해야 합니다. (카드 격자 양측의 공백을 주의하십시오.)그러나 우리의 모든 컨테이너는 맨 왼쪽부터 시작해서 계속 오른쪽으로(또는 flex-start) 가야 한다.이것은 우리가 justify-content: center을 간단하게 사용할 수 없다는 것을 의미한다.이것은 마지막 줄의 항목을 다른 줄에 비해 가운데에 있게 할 것이다. 이것은 우리가 '격자' 에 대한 착각을 깨뜨렸다
읊다, 읊조리다
이전에 이 레이아웃을 시도해 본 적이 있다면, 우리가 필요로 하는 @media 조회 조정을 예측할 수 있습니다.이것은 우리가 영원히 3열을 넘을 필요가 없다고 가정하는 예시적인 실현이다.브라우저 창을 닫으려면 [코드 펜에서 편집]을 클릭합니다.

왜 이게 엉망이야?

우리는 열 계수의 매번 변화에 적응하기 위해 @media 조회를 필요로 한다.이것은 a) 각 카드의 너비와 b) 원소 간의 간격을 바탕으로 하는 괴상한 심리수학이 필요하다.카드의 폭을 1px으로 조정하려면 이 계산들을 다시 실행해야 합니다!아니오, 우리는 미디어 조회에서 calc()을 사용할 수 없습니다.😑

단일 카드 너비보다 작은 화면 크기는 고려하지 않습니다.우리는 이 점을 바꾸기 위해 @media 조회를 추가할 수 있지만, 곧 CSS 격자가 이러한 수요를 완전히 제거할 수 있음을 보게 될 것이다.

격자화 해야겠다.

이제 CSS 메쉬를 사용하여 동일한 레이아웃을 구현하는 예를 살펴보겠습니다.

.container-of-cards {
  display: grid;
  /* set our column widths with wrapping in place */
  grid-template-columns: repeat(auto-fill, 340px);
  gap: 60px;
  /* center our columns relative to the container */
  justify-content: center;
  /* add a max-width to prevent more than 3 columns */
  max-width: 1200px;
  margin: auto;
}

.card {
  height: 120px;
  /* no need to specify the width or margins! CSS grid does it all for us. */
}

여기 큰 배달이 있는데...

grid-template-columns은 주어진 용기에 가능한 한 많은 열을 만들 수 있도록 합니다.우리의 예에서 우리는 카드가 얼마나 많든지 상관없이 340px 너비의 열과 auto-fill 우리의 용기를 만들고 싶다.

justify-content의 격자 토지에서의 작업 방식은 약간 다르다.이것은 실제적으로 전체 격자 용기가 페이지에 대한 정렬 방식을 조정하는 것이지, 줄마다 a-la Flexbox의 정렬 방식을 바꾸는 것이 아니다.바로 우리가 원하는 거야!참고로 Grid는 justify-items이라는 개별 속성을 사용하여 행의 항목을 정렬합니다.

격자는 용기 중의 항목 간에 gap을 분배할 수 있으며 기본적으로 모든 요소 사이에 경계를 응용한다.이것은 절대로 하느님의 은혜입니다. worth explaining in its own section입니다!

화면 폭이 340px 이하인 경우

앞에서 말한 바와 같이 flexbox는 화면 크기를 줄이기 위해 보통 @media 조회를 추가로 필요로 한다.고맙게도 CSS는 또 다른 신기한 조작부호를 제공했다: minmax✨

.container-of-cards {
  grid-template-columns: repeat(auto-fill, minmax(max-content, 340px));
  ...
}

분해는 다음과 같다. 첫 번째 파라미터는 모든 격자 항목이 가질 수 있는 최소 너비를 나타내고, 두 번째 파라미터는 우리가 시도해야 할 최대 너비를 나타낸다.우리의 예에서 가능하다면 카드의 폭은 340px이었으면 좋겠지만 판면의 폭이 340px보다 작으면 화면의 100%로 축소할 수 있습니다.격자 영역에서, 우리는 max-content을 사용하여 이 최소치를 표시한다.

2.5'차이'를 원한다면

이것은 사람을 낙담하게 하는 문제이다. 우리는 한 줄의 모든 요소 사이에 일정한 간격을 적용하기를 원하지만, 줄의 시작과 끝에 간격을 적용하기를 원하지 않는다.
다음은 Bits of Good projects page에서 얻은 문제의 예입니다.

우리의 길드 flex 지식에 의하면 우리는 최종적으로 이런 대략적인 구조를 얻을 수 있다.

<div class="outer-container">
  <div class="card">...card 1 content</div>
  <div class="card">...card 2 content</div>
  ...
</div>

<style>
  .card {
    width: 340px;
    /* add margins to either side of each card, totalling to a 60px "gap" */
    margin: 30px;
  }
  ...
</style>

이것은 거의 우리가 원하는 목적을 달성하게 했지만, 우리는 결국 flexbox의 양쪽에 어색한 공백이 생겼다.제목이 있으면 우리의 배치가 좀 이상하다.

만약에 저희 페이지에 max-width: 1200px규칙을 따르는 다른 부분이 있다면 이 보증금 문제는 더욱 뚜렷해질 것입니다!
우리는 이 문제를 보완하기 위해 몇 가지 선택이 있다...

은 outer-container 양측의 마이너스 이윤율로 이 차액을 상쇄했다.이것은 우리의 문제에 있어서 괜찮은 반창고이지만, 그것은 아주 읽을 수 있는 해결 방안이 아니다.예를 들어 만약에 우리가 이동된 레이아웃의 카드 격자 주위에 여분이 있고 더욱 광범위한 레이아웃에 여분이 없으면 어떻게 해야 합니까?우리는 그것을 margin: -30px->margin: 0으로 쓸 수 있지만, 그것은 not super readable / doesn't spark joy in some devs' opinions이다.

은 보증금을 포기하고 카드당 margin-right: 60px을 사용한다.이것은 줄마다 마지막 항목의 간격을 삭제하기 위해 nth-child 곡예를 필요로 하는데, 열의 수에 따라 간격은 더욱 나빠질 뿐이다💀

...아니면, 우리는 직접 격자를 사용할 수 있다!이전 해결 방안에서 보듯이, 격자는 부모 용기의 요소 사이의 간격을 정의할 수 있습니다.행과 열 사이에 별도의 간격을 정의할 수도 있습니다.

.container-of-cards {
  display: grid;
  /* gap between rows */
  row-gap: 60px;
  /* gap between columns in a row */
  column-gap: 120px;
  /* same card setup as our last example */
  grid-template-columns: repeat(auto-fill, minmax(max-content, 340px));
}

3. 콜라주 효과를 원할 때

이것은 상징적인 CSS 격자 기능입니다. 당신은 이미 보았을 수도 있지만, 그것은 절대로 중복될 가치가 있습니다.
만약 당신이 어떤 사진 라이브러리를 만들고 있다면.너는 너비와 높이가 일치하는 카드를 만들 필요가 없고, 가장 좋아하는 그림을 강조하기 위해 유행하는 동태를 추가해야 한다📸
다음은 내가 가장 좋아하는 예이다.

나는 flexbox로 이런 레이아웃을 시도할 수 있다...그러나 나는 1000줄 div 조정과 @media 조회가 매우 효과적이라고 생각하지 않는다.어떤 상황에서도 당신은 격식화되기 전의 사회에서 디자이너의 꿈을 철저히 격추시킬 수 있다.
너는 see the completed Pen으로 모든 미덕을 흡수할 수 있다.여기서 내가 말하고 싶은 가장 큰 수확은 Grid의'경계'개념이다.

.container {
  /* make a gridified container with 4 columns,
  each 25% of the container width (denoted by fr / fractional units) */
  grid-template-columns: repeat(4, 1fr);
  /* don't specify how many rows (let everything auto-wrap) */
}

img.thicc {
  /* let this image span 2 columns (wider than it is tall),
  starting at the first column */
  grid-column: 1 / span 2;
  grid-row: 1;
}

img.tall {
  grid-column: 2;
  /* let this image span 2 rows (taller than it is wide),
  starting at the third row */
  grid-row: 3 / span 2;
}

여기 큰 배달이 있는데...

격자에서는 '파벌 단위' 또는 frs를 사용하여 열 폭을 지정할 수 있습니다. 이것은 기본적으로 flex 단위의 표식이지만 용기는 그것들을 지정합니다.모든 원소를 하나의 공통된 단위에 복종시키려면 많은 번거로움을 줄일 수 있다.

메쉬에 있는 각 요소는 수정되지 않고 지정된 행과 열을 따르도록 허용할 수 있습니다(각 요소는 1열을 넘고 기본적으로 1행으로 설정됨).

span 스타일의 매운 파워 추가🌶. 이것은 우리에게 깔끔한 스티커 효과를 주었다.

여기에 무수한 격자 밀집 레이아웃의 예로 스타일시트를 확장할 가능성이 있다.This collection of Pens은 좋은 출발점입니다!

뭘 배워요?

경탄했어만약 당신이 놓쳤다면, 나는 my "web wizardry" newsletter을 시작하여 이런 지식의 보고를 더 많이 탐색할 것이다!
이 일은 웹 개발의 "first principles" 문제를 해결했다.다시 말하면, 우리의 모든 웹 프로젝트가 좋은 브라우저 API, 구부러진 CSS 규칙, 반 접근 가능한 HTML을 실행하게 하는 것은 무엇입니까?만약 네가 이 틀을 뛰어넘고 싶다면, 이것은 너의 사랑하는 사이버 마법사에게 주는 것이다🔮
Subscribe away right here . 나는 영원히 가르칠 것을 보증하며, 여태껏 스팸메일을 보내지 않았다❤️