그 상자는 얼마나 큽니까? CSS 레이아웃의 크기 조정 이해

Flexbox 및 Grid Layout의 주요 기능은 그리드와 플렉스 항목 사이, 주변 및 내부에 사용 가능한 공간을 분배하는 것을 처리할 수 있다는 것입니다. 꽤 자주 이것은 잘 작동 하며 우리는 열심히 노력하지 않고도 원하는 결과를 얻습니다. 이는 사양이 가장 가능성이 높은 사용 사례로 기본값을 설정하려고 하기 때문입니다. 그러나 때로는 무언가가 왜 그 크기로 끝나는지 의아해할 수 있습니다. 또는 기본 동작과 다른 작업을 수행할 수 있습니다. 그렇게 하려면 기본 알고리즘이 공간을 분산하는 방법을 파악하는 방법을 알아야 합니다.

이 기사에서는 CSS에서 상자 크기 조정에 대한 몇 가지 흥미로운 사실을 공유하려고 합니다. 나는 그 상자가 얼마나 큰지 정확히 이해하는 데 중요하다고 생각하는 사양에서 몇 가지를 골랐습니다. 시간을 내어 읽어보면 그리드의 크기 조정이 훨씬 덜 신비롭다는 것을 알게 될 것입니다!

길이 단위

가장 친숙한 크기 조정부터 시작할 수 있습니다. CSS 값 및 단위 모듈 사양에 설명된 길이 단위입니다. CSS 속성에 허용되는 값으로 <length> 가 표시되면 여기에 나열된 값 중 하나를 의미합니다. 이 값은 모두 거리이며 일반적으로 정수와 단위 식별자(예: 12px 또는 1em )로 구성됩니다. 값이 0 이면 단위 식별자를 생략할 수 있습니다. 또한 길이 단위는 상대 길이와 절대 길이로 나뉩니다.

상대 길이

상대 길이는 다른 것에 상대적인 크기를 취하므로 상대 길이를 사용하여 정의된 것의 최종 크기는 상대적인 것이 변경되면 다를 수 있습니다.

전체 상대 단위 집합은 다음과 같습니다. 처음 4개 단위는 글꼴 기준이고 마지막 4개 단위는 뷰포트 기준입니다.

• em
• ex
• ch
• rem
• vw
• vh
• vmin
• vmax

이러한 값은 어떤 것에 상대적이기 때문에 정확히 무엇에 상대적인지 식별하는 것이 중요합니다. 글꼴 관련 단위 rem 의 경우 이것은 항상 루트 요소 의 크기에 상대적입니다. HTML 문서는 html 요소입니다.

아래의 첫 번째 예에서는 html 요소를 글꼴 크기가 20픽셀로 설정했습니다. 따라서 1rem 은 20픽셀입니다. 그런 다음 요소에 10rem 너비를 지정하면 너비가 200픽셀이 됩니다(20px에 10을 곱하면 200).

다른 글꼴 관련 단위( em , ex 및 ch )가 요소의 길이에 사용되는 경우 해당 요소에 적용된 글꼴 크기에 상대적입니다. 두 번째 예(상자의 너비는 10em )에서 em 단위는 크기를 조정하는 요소에 적용된 글꼴을 보고 이를 기반으로 계산합니다. 따라서 상자의 글꼴 크기가 30px 이므로 이 상자의 너비는 300픽셀이 됩니다.

글꼴 상대 단위가 글꼴 크기에서 계산되는 경우 뷰포트 상대 단위는 초기 포함 블록 으로 알려진 직사각형과 관련하여 계산됩니다. 화면에서 이것은 뷰포트의 치수를 갖습니다. vw 단위는 뷰포트 _너비 의 _1/100 이고 ^vh 는 ^높이 의 vh 입니다. 너비가 50vw 이고 높이가 50vh 인 상자는 뷰포트 너비의 절반과 높이의 절반이어야 합니다.

vmin 및 vmax 단위는 뷰포트의 더 크거나 더 작은 차원에 상대적인 크기를 지정할 수 있기 때문에 유용합니다. 이것은 예를 들어 뷰포트의 가장 긴 면의 50%를 만들 수 있음을 의미합니다. 이는 누군가가 기기를 가로 또는 세로 모드로 들고 있을 때 특히 유용합니다. vmin 단위는 항상 작거나 vw 또는 vh 로 해석되고 vmax 는 vw 또는 vh 중 큰 값으로 해석됩니다. 따라서 너비가 항상 장치의 가장 긴 면의 20%가 되도록 하려면 20vmax 를 사용할 수 있습니다. 장치가 세로 모드로 유지되면 20vmax 는 20vh 와 같습니다. 장치가 가로 모드로 유지되면 20vw 와 같습니다.

아래 예는 vw 및 vh 크기의 블록을 vmin 및 vmax 를 사용하여 하나의 크기와 비교합니다. 데스크톱 컴퓨터나 가로 모드의 전화기에서는 두 상자가 같은 크기로 나타나야 합니다. 전화를 세로 모드로 전환하거나 창을 끌어 너비가 높이보다 작아지면 두 번째 블록이 계산을 수행하는 치수가 어떻게 변경되는지 확인할 수 있습니다.

절대 단위

절대 단위는 물리적 차원에 매핑되며 화면의 다른 항목에 비례하여 크기가 조정되지 않습니다. 따라서 출력 환경을 알 때 가장 유용합니다.

아래 목록은 CSS에서 허용되는 절대 단위를 보여줍니다.

• cm
• mm
• Q
• in
• pc
• pt
• px

보시다시피, 이들 중 많은 부분이 화면 컨텍스트에서 거의 의미가 없지만 인쇄용 CSS를 생성하는 경우 pt 또는 in 을 사용하는 것이 용지 크기를 알고 있을 때 많은 의미가 있을 수 있습니다.

픽셀은 절대 길이 단위로 분류되며 레티나 장치용 이미지를 만든 사람이라면 누구나 알겠지만 길이 측면에서 픽셀은 장치 픽셀과 동일하지 않습니다. CSS는 참조 픽셀 의 개념을 사용하며 사양에서는 픽셀 단위가 참조 픽셀에 가장 근접한 기기 픽셀의 전체 수를 참조하도록 권장합니다.

참조 픽셀은 픽셀 밀도가 96dpi이고 리더로부터 팔 길이만큼의 거리가 있는 장치에서 한 픽셀의 시야각입니다. 따라서 28인치의 공칭 팔 길이의 경우 시야각은 약 0.0213도입니다. 따라서 팔 길이로 읽을 때 1px는 약 0.26mm ⁽ _1/96 인치)에 해당합니다. — "CSS 값 및 단위 모듈 레벨 3", W3C

백분율

대부분의 경우 크기에 길이 단위 대신 백분율을 사용할 수 있습니다. 그런 다음 이 백분율은 상대 길이 단위가 확인되는 것과 같은 방식으로 무언가와 관련하여 계산해야 하며 사용 중인 레이아웃 방법에 대한 사양은 백분율 이 .

사양에서 허용 가능한 길이 값으로 <length-percentage> 가 표시되는 경우 이는 백분율이 사용되기 전에 길이로 해석됨을 의미합니다. 아래 예에서 외부 요소의 너비는 400픽셀이고 첫 번째 자식 요소의 너비는 50%입니다. 그러면 200픽셀(400의 50%)로 해결됩니다.

두 번째 자식 요소의 너비는 calc 를 사용하여 50픽셀을 50%에 추가하여 해당 블록의 너비를 250픽셀로 만듭니다. 따라서 50%는 길이로 분해된 다음 계산에 사용됩니다.

반응형 디자인 시대를 거치며 웹 작업을 해본 사람들은 그리드에 배치된 것처럼 보이는 레이아웃을 만들기 위해 백분율을 사용하는 데 익숙해졌습니다. 백분율로 작업하면 Grid 및 Flexbox의 기능을 완전히 활용하기 위해 포기하기 시작해야 하는 제어, 제어가 어느 정도 제공됩니다!

CSS 고유 및 외부 크기 조정

지금까지 상자에 크기를 지정하고 다양한 방법으로 너비와 높이를 설정하는 방법과 길이 단위와 백분율을 사용하는 방법을 살펴보았습니다. 그러나 웹페이지의 상자에는 크기가 있습니다. 사용자가 지정하지 않은 경우에도 마찬가지 입니다. 요소가 페이지에 배치되는 방식을 이해하는 것이 중요하며 flexbox 및 Grid 레이아웃을 사용할 때 그 크기가 점점 더 중요해집니다. Grid 및 flexbox에 내장된 많은 유연성은 항목을 표시하는 데 필요한 것보다 더 많은 공간이 있거나 항목이 공간이 무한한 경우 차지하는 공간보다 적은 공간에 맞춰야 하는 상황을 관리하기 때문에 옵니다.

사물의 크기를 정의하고 해당 크기를 제어하는 ​​추가 방법을 제공하는 모듈은 CSS 내부 및 외부 크기 조정 모듈입니다. 이 다음 섹션에서는 이 모듈이 정의하는 것과 flexbox 및 그리드의 레이아웃을 이해하는 데 왜 이것이 중요한지 살펴보겠습니다.

크기 조정 키워드

모듈의 초록은 다음과 같이 말합니다.

이 모듈은 콘텐츠 기반 "내재적" 크기 및 컨텍스트 기반 "외부적" 크기를 나타내는 키워드로 CSS 크기 조정 속성을 확장하여 CSS가 콘텐츠에 적합하거나 특정 레이아웃 컨텍스트에 맞는 상자를 보다 쉽게 ​​설명할 수 있도록 합니다.

키워드는 일반적으로 길이를 사용하는 모든 속성에 사용할 수 있습니다. 예를 들어 width , height , min-width 등은 그리드 레이아웃 트랙 크기 조정 및 flexbox flex-basis 에서 사용하도록 지정됩니다. 현재 편집자의 레벨 3 핵심 사양 초안 에 정의된 키워드 값은 다음과 같습니다.

• max-content
• min-content
• fit-content(<length-percentage>)

이러한 키워드 중 일부를 div 너비에 사용하는 경우 어떻게 작동하는지 살펴보겠습니다. div는 블록 수준 요소이므로 너비를 지정하지 않으면 인라인 차원에서 가능한 한 넓게 확장됩니다. 뷰포트 또는 포함하는 블록의 가장자리에 도달할 때까지.

텍스트 문자열이 허용된 공간보다 길면 div 내부에서 줄 바꿈되고 상자가 이를 수용할 수 있도록 더 높아집니다. 포함하는 블록에서 허용하는 공간 이외의 다른 너비를 div에 지정하려면 앞에서 설명한 길이 단위를 사용할 수 있습니다. 그러면 텍스트가 해당 길이에 도달하자마자 줄 바꿈이 시작됩니다.

길이를 사용하거나 포함하는 블록의 가장자리를 치는 방식으로 상자를 제한하는 대신 콘텐츠가 크기를 지정하도록 허용할 수 있습니다. 여기에서 이러한 새로운 콘텐츠 기반 크기 조정 키워드가 등장합니다.

최소 콘텐츠

div에 width: min-content 를 사용하면 div는 이제 필요한 만큼만 커지며 콘텐츠는 인라인 방향으로 최대한 작아집니다. 텍스트 문자열의 경우 이는 텍스트가 가능한 모든 소프트 래핑 기회를 취한다는 것을 의미합니다.

이것은 이 요소의 최소 콘텐츠 크기입니다. 어떤 식으로든 넘치는 콘텐츠 없이 얻을 수 있는 가장 작은 것입니다.

최대 콘텐츠

width: max-content 를 사용하면 반대 동작이 발생합니다. 이제 상자가 인라인 차원에서 최대한 커지면 콘텐츠를 포함할 수 있을 만큼 커집니다. 이제 텍스트 문자열이 늘어나고 줄 바꿈이 전혀 되지 않습니다. 이 div가 자라야 하는 사용 가능한 너비보다 넓어지면 오버플로가 발생합니다.

이러한 콘텐츠 키워드는 브라우저에 제공되며 Chrome에서 사용할 수 있으며 Firefox에서 width 및 height 값으로 접두사를 사용할 수도 있습니다. 아래에서 살펴보겠지만 아직 flexbox에서 flex-basis 구현되지 않은 것처럼 그리드 레이아웃에서 트랙 크기 조정에 사용할 수 있습니다. 하지만 지금 살펴봐야 하는 진짜 이유는 min-content 와 max-content 가 존재 한다는 사실을 이해하기 위해서입니다. Flexbox와 Grid에서 공간이 어떻게 분배되는지 살펴보기 시작하면 최소 및 최대 콘텐츠 크기가 중요하기 때문입니다.

CSS 그리드 레이아웃의 콘텐츠 기반 크기 조정

CSS 그리드 레이아웃에는 그리드 트랙의 크기를 조정하는 데 사용되는 방금 탐색한 콘텐츠 키워드가 제대로 구현되어 있습니다. 즉, 콘텐츠가 그리드에서 트랙 크기를 결정하도록 할 수 있습니다. 그리드에서 기억해야 할 중요한 점은 그리드가 2차원 레이아웃 모델이라는 것입니다. 열 트랙에 min-content 크기가 되도록 요청하는 경우 트랙은 트랙에서 가장 넓은 것을 기준으로 크기가 조정됩니다.

최소 콘텐츠

다음 예에는 3열 트랙 그리드가 있습니다. 열의 크기는 min-content 키워드를 사용하여 조정됩니다. 셀 중 하나에 더 많은 콘텐츠가 포함되어 있으며 콘텐츠가 가능한 위치에서 어떻게 줄바꿈되는지 확인할 수 있습니다. 이 콘텐츠를 min-content 크기로 표시하는 데 필요한 크기가 전체 트랙의 크기가 됩니다.

최대 콘텐츠

min-content 의 경우와 동일한 예를 보고 각 열이 max-content 를 사용하도록 변경하면 텍스트가 많은 항목이 포함된 트랙이 텍스트를 수용할 수 있도록 어떻게 커졌는지 알 수 있습니다. 이로 인해 트랙이 그리드를 정의한 요소의 크기보다 넓어져서 오버플로되었습니다.

적합 콘텐츠

아직 살펴보지 않았고 그리드 레이아웃에 구현된 키워드는 fit-content 입니다. 이 키워드는 길이 또는 백분율을 값으로 사용합니다. 트랙 크기 조정을 위해 fit-content 를 사용하면 전달한 값의 크기에 도달할 때까지 트랙이 max-content 처럼 작동합니다. 해당 크기에 도달하면 트랙이 성장을 멈추고 콘텐츠가 줄 바꿈됩니다.

아래 예에서 세 개의 열 트랙은 모두 fit-content(10em) 을 사용하여 크기가 조정됩니다. 트랙이 10em보다 좁으면 max-content 처럼 작동합니다. 더 오래 달리는 중앙 트랙은 10em에 도달하면 성장을 멈춥니다.

참고 : 이러한 콘텐츠 크기 조정 키워드를 보여주기 위해 짧은 비디오 자습서를 만들었습니다 .

자동 크기 트랙

트랙 크기 조정에 대해 더 깊이 파고 들기 전에 트랙 크기 조정에 사용할 때 auto 가 무엇을 의미하는지 이해하는 것도 중요합니다. 암시적 그리드 트랙은 auto 크기 조정으로 생성되며 일반적으로 그리드를 사용하기 시작할 때 이를 이해할 것입니다. 열 트랙을 지정한 다음 명시적 정의 없이 콘텐츠를 행에 배치합니다. 행 트랙은 auto 으로 콘텐츠 크기를 확인하고 콘텐츠를 포함할 만큼 충분히 높은 트랙을 생성하기 때문에 콘텐츠를 포함하도록 커집니다.

그러나 auto 는 사양에서 특정한 의미를 갖습니다. Grid 및 flexbox의 경우 트랙 크기에 auto 를 사용하거나 flex-basis 값으로 사용하면 항목(또는 Grid의 경우 해당 트랙의 항목)에 크기가 있는지 확인하고 해당 크기를 기본 트랙 크기 또는 flex-basis 값으로 사용합니다. 아래 CodePen에서 이런 일이 일어나는 것을 볼 수 있습니다. 첫 번째 예는 그리드 레이아웃이고 두 번째 예는 Flex 레이아웃입니다. 그리드 레이아웃에는 모두 auto 크기 조정되는 3개의 열 트랙이 있으며, Flex 레이아웃의 각 항목은 auto 의 flex-basis 에서 늘리거나 줄일 수 있습니다.

두 레이아웃 모두에서 최종 항목의 너비는 200px입니다. 트랙 크기 조정을 수행할 때 해당 너비가 어떻게 사용되는지 확인할 수 있습니다. 마지막 항목 flex-basis 가 되며 그리드 트랙의 기본 크기가 됩니다. 다른 Grid 트랙 및 플렉스 항목의 경우 너비가 없으므로 알고리즘이 콘텐츠 크기를 사용합니다.

그리드 트랙의 크기를 조정하는 또 다른 방법으로 이동한 후 auto 가 작동하는 방식과 다른 트랙 크기 조정 방법과 함께 어떻게 유용할 수 있는지로 돌아갑니다.

fr 단위

이 기사의 시작 부분에서 논의된 모든 길이 단위는 그리드 레이아웃의 트랙 크기 조정에도 사용할 수 있습니다. 또한 fr 단위에 추가 단위가 있습니다. 이것은 그리드 레이아웃에만 적용되므로 크기 조정과 관련된 모듈보다는 그리드 사양에 자세히 설명되어 있습니다. fr 단위는 유연한 길이 또는 <flex> 이며 그리드 컨테이너에 남은 공간의 일부를 나타냅니다.

fr 단위는 길이가 아니며 백분율 또는 길이 단위와 같은 방식으로 calc() 와 함께 사용할 수 없습니다.

fr 단위를 사용하여 동일한 크기 의 트랙 3개를 만든 아래와 같은 데모를 종종 볼 수 있습니다. 그리드 컨테이너의 공간은 3개로 분할되어 각 트랙에 동일하게 할당되었습니다.

여기에서 fr 단위는 flex-basis 가 0 인 경우 Flexbox가 동작하는 것과 매우 유사하게 작동합니다. 그리드는 그리드 컨테이너의 모든 공간을 차지하고 각 트랙에 한 부분을 전달합니다. 그러나 그리드는 이 작업을 수행할 때 트랙이 오버플로되지 않도록 합니다. 1fr 의 3개 트랙이 항상 동일한 크기의 3개 트랙이라는 인상을 받는 경우 이 동작이 혼동될 수 있습니다.

예를 들어 Supercalifragilisticexpialidocious 와 같이 소프트 랩할 수 없는 매우 긴 단어를 중간 트랙에 추가하면 동일한 너비의 열이 3개 생성되지 않습니다.

그리드는 트랙이 항목을 포함할 만큼 충분히 큰지 확인한 후에 만 사용 가능한 공간을 공유합니다. Grid는 min-content 를 사용한 경우 트랙의 크기를 확인합니다. 해당 크기가 fr 단위를 통해 트랙에 전달될 크기보다 작 으면 내용이 고려되지 않습니다. 해당 min-content 크기가 fr 단위로 제공되는 트랙 보다 크면 남은 공간이 공유되기 전에 min-content 크기가 해당 트랙에 사용됩니다.

따라서 fr 단위는 해당 트랙의 min-content 크기가 더 크지 않으면 flex-basis 가 0 인 flexbox처럼 작동하고 auto 의 flex-basis 를 사용하는 flexbox처럼 더 많이 작동합니다. 이전 섹션의 auto 예제에서와 같습니다. 동일한 너비의 트랙이 매우 같지 않은 경우 이 점을 기억할 가치가 있습니다. 가능한 이유는 트랙 중 하나에 전달되는 것보다 더 큰 min-content 크기가 있기 때문입니다.

minmax 로 동일한 트랙 만들기

이제 fr 단위가 우리가 원하는 것보다 더 큰 트랙을 생성할 수 있는 이유를 알았습니다. 그러나 다른 그리드 특정 크기 조정 방법인 minmax() 함수를 가져와 이것이 작동하는 방식을 제어할 수 있습니다. 위의 예(한 트랙의 긴 단어로 더 큰 min-content 크기를 강제함)에서 Grid는 다음 트랙 크기 정의를 사용하는 것처럼 작동합니다.

 .grid { display: grid; grid-template-columns: minmax(auto,1fr) minmax(auto,1fr) minmax(auto,1fr); }

그리드는 content 크기로 해석되는 auto 크기를 보고 있으며, 남은 공간을 공유하기 전에 이를 트랙의 기본 크기로 사용합니다.

위의 예에서 Grid가 오버플로가 발생하더라도 중간 트랙을 그리드 컨테이너의 너비와 동일하게 공유하도록 하려면 minmax() 의 첫 번째 값을 0 으로 지정하면 됩니다. 다음 예에서 볼 수 있듯이 오버플로가 발생합니다.

사양이 기본적으로 수행하는 동작으로 설정되어 있는 이유를 알 수 있습니다. 일반적으로 콘텐츠를 표시할 공간이 있는 경우 오버플로가 발생하는 것을 원하지 않지만, 필요한 경우 문제를 강제하고 오버플로를 일으킬 수 있습니다.

minmax() 함수는 행이 비어 있을 때 높이가 0으로 축소되는 것을 방지하기 위해 행의 크기를 조정할 때도 매우 유용하지만 추가되는 모든 콘텐츠를 허용하는 크기로 계속 커질 수 있습니다. 다음 예에서는 grid-auto-rows 를 minmax(50px, auto) 로 설정했습니다. 암시적 그리드의 트랙은 항상 50픽셀 높이이지만 해당 행의 한 셀에 있는 콘텐츠 양으로 인해 두 번째 행이 더 높다는 것을 알 수 있습니다.

그리드 레이아웃의 백분율

그리드 레이아웃에 fr 단위, 내용 기반 크기 조정 및 일반적인 길이 단위가 있지만 일부 크기 요구 사항에 대해 백분율을 사용하고 싶을 수도 있습니다. 대부분 의 경우 fr 단위가 더 나은 선택이지만 때로는 정확한 백분율 크기를 직접 제어해야 할 수도 있습니다. 그렇게 하는 한 가지 이유는 백분율 크기에 의존하는 다른 레이아웃 방법도 사용하는 디자인에서 Grid를 사용하여 레이아웃된 요소를 정렬하는 경우입니다.

대부분의 경우 백분율 크기 조정은 예상대로 작동합니다. 백분율을 사용하여 크기가 조정된 그리드 트랙은 그리드 컨테이너 너비에서 백분율을 계산합니다. gap 속성에 백분율을 사용할 수도 있으며 그리드 컨테이너 너비에 따라 계산됩니다. 아래 예에는 각각 30%의 세 개의 열 트랙과 트랙 사이에 5%의 그리드 간격이 있습니다.

주의가 필요한 곳은 세로 여백과 패딩에 백분율을 사용할 때입니다. Flexbox와 Grid 모두에서 오랜 문제로 인해 세로 백분율 여백과 패딩이 브라우저마다 계산되는 방식이 다릅니다.

이 문제에 대한 자세한 내용은 "그리드 및 플렉스 항목에서 백분율 여백 및 패딩을 해결하는 방법"에서 읽을 수 있습니다. 그러나 내 조언과 사양은 여백에 백분율을 사용하고 시간 동안 상단 및 하단 패딩을 사용하지 않는 것입니다. 결과가 일치하지 않기 때문입니다.

그리드 레이아웃의 정렬 및 크기 조정

그리드 레이아웃에서 상자 정렬 속성을 사용하면 그리드 영역의 크기도 변경할 수 있습니다. 4개의 100픽셀 열 트랙, 3개의 50픽셀 행 트랙 및 20픽셀 간격이 있는 다음 레이아웃을 고려하십시오. 그리드 트랙은 그리드 컨테이너의 전체 영역을 차지하지 않으므로 양쪽 축에서 start 하도록 스스로 정렬됩니다. 두 개 이상의 트랙에 걸쳐 있는 항목은 해당 항목이 걸쳐 있는 모든 트랙과 간격의 합계인 크기가 됩니다.

이제 Box Alignment 속성 align-content 및 justify-content 를 space- space-between 값과 함께 사용하면 간격이 늘어남에 따라 트랙이 펼쳐져 추가 공간을 흡수합니다. 이제 둘 이상의 트랙에 걸쳐 있는 항목은 이제 확대된 간격의 공간을 포함하므로 더 커졌습니다.

Flexbox와 그리드의 공간 분포 비교

레이아웃을 다룰 때 min-content 및 max-content 콘텐츠와 같은 개념을 이해하는 것이 중요하다고 생각하는 이유는 레이아웃의 세부 사항을 파고들 수 있기 때문입니다. 컨테이너에 항목을 맞춰야 할 때 flexbox와 Grid에서 일어나는 일을 비교하여 발견한 좋은 예를 들어 이 기사를 마무리하겠습니다.

이 예는 4개의 플렉스 항목이 있는 플렉스 컨테이너를 보여줍니다. 그 아래에는 4개의 그리드 항목이 있는 그리드 컨테이너가 있습니다. 이 내용은 동일하지만 대략적으로 유사한 레이아웃임에도 불구하고 레이아웃이 약간 다릅니다. 플렉스 항목은 auto 의 flex-basis 을 가지며 축소가 허용됩니다. 그리드 정의는 모두 auto 크기로 4개의 트랙을 정의합니다.

flexbox 예제에서 더 짧은 항목은 min-content 크기로 축소되었으며 더 큰 항목에는 더 많은 공간이 제공되었습니다.

Grid 예에서 더 작은 항목은 max-content 크기로 표시되므로 더 긴 항목은 표시할 공간이 적습니다. 이 행동을 처음 봤을 때 나는 어리둥절했다. 차이의 이유는 레이아웃 방법에서 항목의 크기를 계산하는 알고리즘으로 귀결됩니다. Flexbox에서 항목은 max-content 크기에서 시작합니다. flex-shrink 가 양수 값이므로 각 항목에서 공간이 제거되기 시작합니다. 더 작은 항목이 min-content 크기에 도달하면 flexbox는 사라지거나 넘쳐나는 것을 방지하기 위해 공간을 더 이상 차지하지 않습니다.

그러나 그리드는 min-content 크기의 항목으로 시작한 다음 공간을 추가 합니다. 항목은 나머지 공간을 채울 수 있는 더 큰 항목이 있으므로 포인트 그리드가 공간 할당을 중지하는 max-content 크기에 빠르게 도달합니다. 이제 min-content 및 max-content 에 대해 알았으므로 이러한 방식으로 트랙이나 항목이 표시되는 시점을 파악하여 진행 상황을 파악하고 파악할 수 있는 출발점이 될 것입니다.

크기가 중요합니다!

일렬로 정렬하기 위해 백분율 크기를 계산하는 것은 결코 재미가 없었지만 적어도 우리 모두가 이해한 것이었습니다. 그것은 우리가 모든 일을 해야 한다는 것을 의미했음에도 불구하고 우리에게 많은 통제권을 주었습니다. Flexbox 및 Grid를 사용하기 시작할 때 때때로 우리가 기대한 레이아웃을 얻지 못한다는 사실을 발견하는 것은 실망스러울 수 있습니다. 우리 스스로 작업을 수행하고 flex-basis 또는 트랙 크기 조정을 위해 백분율을 사용하는 것으로 바로 돌아가고 싶을 수 있습니다.

그러나 다양한 상황에서 일어나는 일에 익숙해질 때까지 사이징을 가지고 놀면서 시간을 보내면 결국 갚을 것입니다. 더 적은 수의 미디어 쿼리가 필요하고 레이아웃 방법의 고유한 유연성에 의존할 수 있습니다.

탐색을 시작하는 데 도움이 되도록 이 문서의 예제를 가능한 한 간단하게 유지하여 예제를 분기하고 실험할 수 있도록 했습니다. 이 기사에서 내가 공유한 대부분의 내용은 내가 다른 것을 시도하면 어떤 일이 일어날지 궁금해한 결과입니다. 따라서 답변보다 더 많은 질문이 남아 있는 경우 데모 링크가 포함된 의견을 게시하고 사양에서 설명하는 부분을 가리켜 보겠습니다.