CSS의 20 줄에 반응 형 그리드 매거진 레이아웃

최근에 나는 블로그 목록을 재 설계하려고합니다. 아이디어는 독자 에게이 블로그의 최신 게시물을 제공하는 것이며, 가장 좋아하는 블로그를 사이드 바에 나열하는 대신 잡지 스타일 레이아웃을 제공하는 것입니다.

쉬운 부분은 좋아하는 RSS 피드에서 요약 된 기사 목록을 얻는 것입니다. 이를 위해 WordPress 플러그인 Feedzy Lite를 사용하여 여러 피드를 시간별로 정렬 한 목록으로 집계했습니다. 최신 컨텐츠를 제시하기에 적합합니다. 어려운 부분은 멋지게 보이게하는 것입니다.

이 플러그인의 기본 목록 UI는 매우 부드럽기 때문에 신문이나 잡지 웹 사이트와 비슷하게 스타일링하여 작고 큰 "주요 콘텐츠"패널을 혼합하고 싶었습니다.

이것은 CSS 그리드에 이상적인 사용 사례 인 것 같습니다! 예를 들어 5 열 레이아웃과 3 열 레이아웃과 같은 다른 레이아웃에 대한 그리드 레이아웃을 만듭니다. 그런 다음 미디어 쿼리를 사용하여 다른 중단 점 사이를 전환하십시오. 오른쪽? 그러나 그리드의 자동 적응 옵션을 사용하여 자동으로 부드러운 반응 형 그리드를 만들 수있을 때, 우리는 이러한 미디어 쿼리와 중단 점을 식별하는 모든 번거 로움이 필요합니까?

이 접근법은 매력적으로 들리지만 크로스 컬럼 요소를 소개하기 시작했을 때 좁은 화면에서 그리드가 넘쳐나는 데 문제가있었습니다. 미디어 쿼리가 유일한 솔루션 인 것 같습니다. 즉, 해결책을 찾을 때까지!

CSS 그리드의 여러 튜토리얼을 살펴본 후 주로 두 가지 범주로 나뉘어져 있음을 알았습니다.

1. 스팬 요소를 사용하여 흥미로운 레이아웃을 만드는 방법을 보여주는 튜토리얼이지만 열 수는 수정되었습니다.
2. 자동으로 크기가 조정되는 반응 형 그리드를 만드는 방법을 설명하는 튜토리얼이지만 모든 그리드 항목은 너비가 동일합니다 (즉, 스팬 열 없음).

그리드가 동시에 동시에 수행하기를 원합니다. 반응 적으로 크기를 조정하는 여러 열 요소가 포함 된 완전히 반응 형 유체 레이아웃을 만듭니다.

아름다움은 반응 형 그리드의 한계를 이해하고 칼럼 스파가 그리드 응답 성을 파괴하는 이유와시기를 이해하면 수십 줄의 코드 라인 과 간단한 미디어 쿼리 (또는 스팬 옵션을 제한하거나 미디어 쿼리 없이도)로 반응 형 잡지/뉴스 스타일 레이아웃을 정의 할 수 있다는 것입니다.

이것은 Box Out-of-Box RSS 플러그인을 보여주는 시각적이며 우리가 스타일을 돌보는 방법입니다.

이 매거진 스타일 그리드 레이아웃은 완전히 반응이 좋으며 컬러 기능 패널은 열 수가 변경됨에 따라 동적으로 조정됩니다. 페이지에는 약 50 개의 기사가 표시되지만 레이아웃 코드는 표시된 항목 수와 관련이 없습니다. 플러그인을 업그레이드하여 100 개의 프로젝트를 표시하면 레이아웃은 항상 흥미 롭습니다.

이 모든 것은 CSS 만 사용하여 구현되며 가장 좁은 화면 (즉, 460 픽셀 미만)에서 단일 열 디스플레이를 처리하기위한 미디어 쿼리는 하나뿐입니다.

놀랍게도이 레이아웃은 21 줄의 CSS 코드 (글로벌 컨텐츠 스타일 제외) 만 사용합니다. 그러나 너무 적은 줄의 코드로 이러한 유연성을 달성하기 위해 CSS 그리드의 더 모호한 부분을 깊이 파고 내 고유 한 제한을 해결하는 방법을 배워야했습니다.

이 레이아웃을 생성하는 코드의 기본 요소는 매우 짧으므로 CSS 그리드의 전력을 보여줍니다.

 <code>.archive { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); grid-gap: 32px; grid-auto-flow: dense; } /* 特宽网格文章*/ .article:nth-child(31n 1) { grid-column: 1 / -1; } .article:nth-child(16n 2) { grid-column: -3 / -1; } .article:nth-child(16n 10) { grid-column: 1 / -2; } /* 手机单列显示*/ @media (max-width: 459px) { .archive { display: flex; flex-direction: column; } }</code>

이 기사의 기술은 최신 기사 위젯의 출력, 아카이브 페이지 또는 검색 결과와 같은 동적으로 생성 된 컨텐츠를 설정하는 데 잘 사용될 수 있습니다.

반응 형 메쉬를 만듭니다

래퍼에 포함 된 다양한 모의 내용 (티틀, 이미지 및 발췌)을 표시하기 위해 17 개의 프로젝트를 설정했습니다.

<code><div>
  </div></code>

이러한 항목을 반응 형 그리드로 변환하는 코드는 매우 작습니다.

 <code>.archive { /* 将元素定义为网格容器*/ display: grid; /* 自动适应尽可能多的项目在一行上，而不会低于180像素*/ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 文章之间的一点间距*/ grid-gap: 1em; }</code>

행 높이는 행에서 가장 높은 컨텐츠에 맞게 자동으로 조정됩니다. 펜의 너비를 변경하면 항목의 폭이 각각 하나의 열에서 5 개의 열로 변경되면서 항목이 부드럽게 커지고 매끄럽게 줄어 듭니다.

여기에 사용 된 CSS 그리드 마법은 auto-fit 키워드이며, grid-template-columns 에 적용되는 minmax() 함수와 함께 사용됩니다.

작동 방식

다음 방법 만 사용하여 5 열 레이아웃을 구현할 수 있습니다.

 <code>.archive { display: grid; grid-template-columns: repeat(5, 1fr); }</code>

그러나 이것은 다른 화면 너비로 성장하고 축소되는 5 개의 열을 생성하지만 항상 5 개의 열을 유지하여 작은 화면에서 매우 좁아집니다. 첫 번째 아이디어는 다양한 미디어 쿼리를 만들고 다른 수의 열로 그리드를 재정의하는 것입니다. 이것은 잘 작동하지만 auto-fit 키워드를 사용하면이 모든 것이 자동으로 수행됩니다.

auto-fit 원하는 방식으로 작동하려면 minmax() 함수를 사용해야합니다. 이는 브라우저에 열을 압축 할 수있는 방법을 알려줍니다. 그런 다음 확장 할 수있는 최대 너비를 알려줍니다. 더 작아서 칼럼 수를 자동으로 줄입니다. 더 큰 열의 수가 증가합니다.

 <code>.archive { grid-template-columns: repeat (auto-fit, minmax(180px, 1fr)); }</code>

이 예에서, 브라우저는 가능한 180 픽셀 너비를 수용 할 수 있습니다. 공간이 남아 있으면 나머지 공간을 공유하여 열이 평균적으로 자랍니다. 이것은 1fr 값의 말입니다. 열을 가용 너비의 동일한 분율로 만듭니다.

창을 드래그하고 가용 공간이 증가함에 따라 모든 기둥이 고르게 자라서 여분의 공간을 사용합니다. 가용 공간이 추가로 180 픽셀의 추가 열을 허용하고 전체 열이 나타날 때까지 열이 계속 증가합니다. 화면 너비를 줄이면 프로세스가 반전되어 그리드를 단일 열 레이아웃으로 완벽하게 조정합니다. 마법!

그리고 한 줄의 코드 로이 모든 응답 성을 얻을 수 있습니다. 이게 얼마나 멋진가요?

"Autoflow : Density"로 스팬 생성

지금까지 우리는 반응 형 그리드를 가지고 있지만 모든 항목은 너비가 동일합니다. 뉴스 또는 매거진 레이아웃의 경우 두 개 이상의 열 또는 모든 열에 걸쳐있어 일부 내용을 강조 표시해야합니다.

멀티 컬럼 스팬을 만들기 위해 더 많은 공간을 차지하려는 그리드 프로젝트에 column-span 기능을 추가 할 수 있습니다. 예를 들어, 목록의 세 번째 항목이 두 열의 너비가 되려면 다음을 추가 할 수 있습니다.

 <code>.article:nth-child(3) { grid-column: span 2; }</code>

그러나 스팬을 추가하기 시작하면 많은 문제가 발생합니다. 먼저, 넓은 품목이 행에 맞지 않을 수 있으므로 격차가 그리드에 나타날 수 있으므로 그리드는 자동으로 다음 행으로 밀어 넣기 위해 자동으로 적응하여 간격을 남겨 두어야합니다.

간단한 해결 방법은 grid-auto-flow: dense 추가하는 것입니다.이 요소는 브라우저가 다른 항목으로 간격을 채우도록 지시하여 아래와 같이 더 넓은 품목 주위에 좁은 콘텐츠를 효과적으로 만듭니다.

이 프로젝트는 이제 순서가 좋지 않으며, 세 번째 프로젝트 이전에는 이중 너비가 나타납니다. 내가 아는 한, 이것은 피할 수 없으며, 수용 해야하는 CSS 그리드의 한계 중 하나입니다.

Greoff Graham의 "그리드 집약적 인 키워드에 대한 자동 흐름 기능"을 확인하십시오 grid-auto-flow: dense 및 작동 방식의 예를 확인하십시오.

스팬을 지정하는 몇 가지 방법

항목에 걸쳐 몇 개의 열을 표시하는 방법에는 몇 가지가 있습니다. 가장 쉬운 방법은 grid-columns: span [n] 레이아웃의 세 번째 항목에는 grid-column: span 2 가 있습니다. 이는 하나의 열만 한 다른 항목보다 두 배나 넓은 이유를 설명합니다.

다른 방법은 그리드 라인을 명시 적으로 정의해야합니다. 그리드 라인의 번호 시스템은 다음과 같습니다.

양수 값 (예 : 1, 2, 3) 또는 음수 값 (예 : -1, -2, -3)을 사용하여 왼쪽에서 오른쪽으로 그리드 라인을 지정하여 오른쪽에서 왼쪽에서 왼쪽으로 수행 할 수 있습니다. 다음과 같이 grid-column 속성을 사용하여 그리드에 항목을 배치하는 데 사용될 수 있습니다.

 <code>.grid-item { grid-column: (起始轨道) / (结束轨道); }</code>

따라서 프로젝트 범위를 지정하는 다른 방법을 제공합니다. 시작 값 또는 최종 값을 모두 span 키워드로 대체 할 수 있으므로 특히 유연합니다. 예를 들어, 위의 예제의 3 열 블루 박스는 8 번째 그리드 항목에 다음 중 하나를 추가하여 만들 수 있습니다.

• grid-column: 3 / 6
• grid-column: -4 / -1
• grid-column: 3 / span 3
• grid-column: -4 / span 3
• grid-column: span 3 / -1
• 등.

비 응답 (즉, 고정 열) 그리드에서, 이들 모두는 위의 그림의 파란색 상자와 동일한 효과를 생성하지만 그리드가 반응이 있고 열 수가 변경되면 차이가 나타나기 시작합니다. 일부 열 범위는 자동 흐름 그리드로 레이아웃을 파괴 할 수 있으므로 두 기술이 호환되지 않는 것처럼 보입니다. 다행히도 우리 가이 두 가지를 성공적으로 결합 할 수있는 몇 가지 솔루션이 있습니다.

그러나 먼저 문제를 이해해야합니다.

오버 플로우 사이드 스크롤 문제

다음은 위의 기호를 사용하여 작성된 일부 특집 영역입니다.

모든 것이 전체 너비 (5 개의 열)에서 잘 보이지만 두 개의 열이어야하는 지점까지 크기가 조정되면 레이아웃이 다음과 같이 끊어집니다.

보시다시피, 우리의 그리드는 응답 성이 아니며 컨테이너가 줄어들었지만 그리드는 5 개의 열을 모두 유지하려고 시도합니다. 이를 위해, 그것은 같은 너비의 열을 유지하려고 노력하고, 그리드는 컨테이너의 오른쪽에서 오버플을 옮겨서 수평 스크롤을 유발합니다.

그 이유는 무엇입니까? 문제는 브라우저가 우리가 명시 한 명시 적 그리드 라인에 순종하려고한다는 것입니다. 이 너비에서 자동 적응 그리드에는 두 개의 열이 암시 적으로 표시되어야하지만 그리드 라인 번호 시스템은 다섯 번째 그리드 라인을 명시 적으로 참조하여이를 모순합니다. 이 모순은 혼란으로 이어집니다. 우리의 암시 적 2 열 그리드를 올바르게 표시하려면 유일하게 허용되는 행 번호는 아래와 같이 1, 2 및 3 및 -3, -2, -1입니다.

그러나 그리드 항목 중 하나라도 그리드 라인 번호 4, 5 또는 6 (또는 -4, -5, 또는 -6)과 같이이 범위를 벗어난 grid-column 참조가 포함 된 경우 브라우저는 혼합 메시지를받습니다. 한편으로, 우리는 유연한 열을 자동으로 생성해야하지만 (이 화면 너비 아래에 두 개의 열을 암시 적으로 제공해야 함) 2 열 그리드에는 존재하지 않는 그리드 라인도 명시 적으로 참조해야합니다. 암시 적 (자동) 열과 명시 적 열의 수 사이에 충돌이있을 때 그리드는 항상 명시 적 그리드를 향한 경향이 있습니다 . 따라서 원치 않는 열과 수평 오버플로가 발생합니다 (이는 적절하게 CSS 데이터 손실이라고도 함). 그리드 라인 번호를 사용하는 것과 마찬가지로 SPANS는 명백한 열을 만들 수 있습니다. 따라서 grid-column: span 3 (데모의 8 번째 그리드 항목)은 그리드가 최소 3 개의 열을 명시 적으로 채택하고 두 개의 열을 암시 적으로 표시하기를 원합니다.

이 시점에서 앞으로의 유일한 방법은 미디어 쿼리를 사용하여 레이아웃 브레이크의 너비에서 grid-column 값을 변경하는 것 같습니다. 그러나 너무 빠르지는 않습니다! 이것이 바로 내가 처음에 가정했던 것입니다. 그러나 더 신중하게 생각하고 다양한 옵션을 시도한 후, 나는 두 개의 열로 끝까지 작동하는 제한된 해결 방법이 있다는 것을 알았으며, 가장 좁은 화면에서 단일 열 레이아웃을 처리하기 위해 하나의 미디어 쿼리 만 남습니다.

해결책

트릭은 표시하려는 가장 좁은 그리드에 나타나는 그리드 라인 만 사용하여 스팬을 지정하는 것임을 깨달았습니다. 이 경우 2 열 그리드입니다. (우리는 미디어 쿼리를 사용하여 가장 좁은 화면에서 단일 열 장면을 처리 할 것입니다.) 이는 그리드를 깨지 않고 그리드 라인 1, 2 및 3 (또는 -3, -2 및 -1)을 안전하게 사용할 수 있음을 의미합니다.

나는 처음에 이것이 다음 조합을 사용하여 최대 두 개의 열의 범위로 제한하는 것을 의미한다고 생각했습니다.

• grid column: span 2
• grid-column: 1 /3
• grid-column: -3 / -1

이것은 두 열까지 범위 전체에서 완벽하게 반응합니다.

이것이 작동하지만 디자인 관점에서 제한적이며 특히 흥미롭지는 않습니다. 큰 화면에서 3, 4 또는 5 개의 열의 스팬을 만들 수 있기를 원합니다. 하지만 뭐? 나의 첫 번째 생각은 미디어 쿼리로 돌아 가야한다는 것이었지만 (좋은 습관은 바뀌기가 어렵다!), 나는이 접근법을 없애고 반응 형 디자인에 대해 다른 방식으로 생각하려고 노력했다.

단지 1 ~ 3, -3 ~ -1로 할 수있는 일을 다시 살펴보면, 1/-3 및 2/-2와 같은 그리드 열의 시작 및 끝 값의 양과 음수를 혼합 할 수 있다는 것을 점차 깨달았습니다. 언뜻보기에 이것은 그리 흥미롭지 않은 것 같습니다. 그리드 크기를 조정할 때 이러한 선의 위치를 ​​깨닫게되면 상황이 바뀝니다.이 스패닝 요소는 화면 크기가 변경됨에 따라 너비가 변경됩니다. 이렇게하면 반응 형 열 스팬에 대한 새로운 가능성이 열립니다. 화면이 넓어지면서 다른 열의 항목은 미디어 쿼리없이 스파이에 걸쳐 있습니다.

내가 찾은 첫 번째 예는 grid-column: 1/-1 입니다. 이렇게하면 모든 열에서 첫 번째 열에서 마지막 열까지의 항목이 전체 너비 배너처럼 카운트됩니다. 열 너비에도 적용됩니다!

grid-column: 1/-2 사용하면 왼쪽에 정렬 된 거의 전체 너비 스팬을 만들 수 있으며,이 범위는 항상 오른쪽에 항목 열을 남깁니다. 두 열로 좁힐 때는 하나의 열로 반응 적으로 줄어 듭니다. 놀랍게도, 그것은 단일 열 레이아웃으로 좁아지면 작동합니다. (그 이유는 그리드가 항목을 제로 너비로 압축하지 않기 때문에 grid-column: 1/1 과 마찬가지로 열이 넓게 유지되기 때문입니다. grid-column: 2/-1 비슷하게 작동하지만 올바른 모서리와 정렬되며 대부분의 경우 단일 열에 표시 될 때 오버 플로우를 일으키는 것을 제외하고는 대부분의 경우에합니다.

다음으로 1/-3 시도했는데 더 넓은 화면에서 잘 작동하여 더 작은 화면에 최소 3 개의 열과 1 개의 열이 표시됩니다. 첫 번째 그리드 라인은 -3의 그리드 라인과 동일하기 때문에 두 열 그리드에서 이상한 일을 할 것이라고 생각합니다. 놀랍게도 여전히 정상적으로 단일 열 항목으로 표시됩니다.

많은 시도 후, 나는 두 그리드의 그리드 라인 번호를 사용하여 11 개의 가능한 그리드 열 값을 발견했습니다. 놀랍게도, 그들 중 3 개는 단일 열 레이아웃까지 제대로 작동합니다. 다른 7 개는 단일 열 디스플레이를 처리하려면 하나의 미디어 쿼리 만 필요합니다.

전체 목록은 다음과 같습니다.

보시다시피, 이것은 가능한 모든 반응 형 스팬의 유한 한 부분 집합이지만 실제로는 실제로 많은 가능성이 있습니다.

• 2/-2 열이 될 때까지 잘 작동하는 중앙 범위를 생성하기 때문에 재미 있습니다!
• 3/-1 두 열에서도 오버플로를 유발할 수 있기 때문에 가장 쓸모가 없습니다.
• 3/-3 은 놀랍습니다.

이 목록의 다양한 grid-column 값을 사용하면 흥미롭고 완전 반응 형 레이아웃을 만들 수 있습니다. 가장 좁은 단일 열 디스플레이의 경우 단일 미디어 쿼리를 사용하여 10 개의 다른 그리드 열 범위 패턴을 사용할 수 있습니다.

단일 열 미디어 쿼리도 일반적으로 간단합니다. 이 마지막 데모의 하나는 작은 화면에서 Flexbox를 복원합니다.

 <code>@media (max-width: 680px) { .archive { display: flex; flex-direction: column; } .article { margin-bottom: 2em; } }</code>

이것은 마지막으로 볼 수 있듯이 최종 그리드로, 한 열에서 5 개의 열로 완전히 반응합니다.

Nth-Child ()로 가변 길이 표시를 반복합니다.

코드를 20 라인 이상으로 줄이는 데 사용한 마지막 트릭은 다음과 같습니다 :nth-child(n) 선택기는 그리드에서 여러 항목을 스타일링하는 데 사용합니다. 내 스팬 스타일이 피드의 여러 항목에 적용되므로 추천 게시물 상자가 페이지에 정기적으로 나타납니다. 먼저 다음과 같이 쉼표로 구분 된 선택기 목록을 사용했습니다.

 <code>.article:nth-child(2), .article:nth-child(18), .article:nth-child(34), .article:nth-child(50) { background-color: rgba(128,0,64,0.8); grid-column: -3 / -1; }</code>

그러나 나는 이것이 번거 로움이라는 것을 빨리 알았습니다. 특히 제목, 링크 등과 같은 각 게시물에서 스타일링하고 싶었던 모든 어린이 요소에 대해이 목록을 반복해야 할 때 프로토 타이핑 기간 ​​동안 스패닝 요소의 위치를 ​​가지고 놀고 싶다면이 목록의 숫자를 수동으로 변경해야합니다.

그 당시 나는 위의 목록에서 사용한 것과 같이 간단한 정수 대신 :nth-child 강력한 기능을 사용할 수 있다는 것을 깨달았습니다. :nth-child(n) 다음과 같은 방정식을 취할 수 있습니다. :nth-child(2n 2) 는 각 초기 자식 요소를 찾습니다.

다음은 페이지 상단에 표시되어 페이지 아래에서 반복하는 :nth-child([公式]) 사용하여 내 그리드에서 파란색 전체 폭 패널을 만드는 방법은 다음과 같습니다.

 <code>.article:nth-child(31n 1) { grid-column: 1 / -1; background: rgba(11, 111, 222, 0.5); }</code>

비트 (31n 1) 괄호 안의 첫 번째, 32 번째, 63 번째 및 기타 서브 하위 항목이 선택되도록합니다. 브라우저는 n = 0 (이 경우 31 0 1 = 1), n ​​= 1 (31 1 = 32), n = 2 (31 * 2 1 = 63)부터 루프를 실행합니다. 마지막 경우, 브라우저는 63 번째 자녀가 없다는 것을 알고 있으므로,이를 무시하고, 루프를 멈추고, CSS를 첫 번째 및 32 번째 자녀에게 적용합니다.

오른쪽에서 왼쪽으로 교대로 나타나는 자주색 상자와 비슷한 일을했습니다.

 <code>.article:nth-child(16n 2) { grid-column: -3 / -1; background: rgba(128, 0, 64, 0.8); } .article:nth-child(16n 10) { grid-column: 1 / -2; background: rgba(128, 0, 64, 0.8); }</code>

첫 번째 선택기는 오른쪽의 자주색 상자에 사용됩니다. 16n 2 두 번째 프로젝트부터 스타일이 각 16 번째 그리드 프로젝트에 적용되도록하십시오.

두 번째 선택기는 상자를 오른쪽으로 찾습니다. 동일한 간격 (16n)을 사용하지만 오프셋은 다릅니다 (10). 결과적 으로이 상자는 10, 26 및 42와 같은 그리드 항목의 오른쪽에 정기적으로 나타납니다.

이 메쉬 항목의 시각적 스타일과 그 내용과 관련하여, 나는 다른 트릭을 사용하여 복제를 줄입니다. 두 상자 (예 : background-color )에서 공유하는 스타일의 경우 단일 선택기를 사용하여 다음을 모두 찾을 수 있습니다.

 <code>.article:nth-child(8n 2) { background: rgba(128, 0, 64, 0.8); /* 其他共享样式*/ }</code>

이것은 항목 2, 10, 18, 26, 34, 42, 50 등을 찾습니다. 다시 말해, 왼쪽과 오른쪽에서 두 개의 기능 상자를 선택합니다.

8N은 16N의 정확히 절반이고 두 개의 별도 선택기에 사용 된 오프셋이 8만큼 다르기 때문에 작동합니다 (즉 10과 2의 차이는 8입니다).

마지막 생각

현재 CSS 그리드는 최소한의 코드로 유연한 응답 형 그리드를 생성하는 데 사용할 수 있지만 미디어 쿼리의 뒤로 단계를 사용하지 않고 요소를 찾는 데 몇 가지 중요한 제한이 있습니다.

작은 화면에서 오버플로를 강제하지 않는 스팬을 지정할 수있어서 좋습니다. 현재 우리는 실제로 브라우저에 "반응 형 그리드를 만들어주세요"라고 말하고 있습니다. 그러나 우리가 계속하면“아, 그리고이 그리드 항목을 4 개의 열에 걸쳐 있으면 좁은 화면에 울화되어 응답 형 그리드보다 4 개의 열 범위 요청을 우선시합니다. SPAN 요청에 대한 응답 성을 우선시하도록 그리드에 알릴 수있어서 좋을 것입니다. 이것과 유사 :

 <code>.article { grid-column: span 3, autofit; }</code>

반응 형 그리드의 또 다른 문제는 마지막 줄입니다. 화면 너비가 변경됨에 따라 마지막 줄은 종종 채워지지 않습니다. 나는 마지막 그리드 항목을 남은 열을 만들 수있는 방법을 찾는 데 오랜 시간을 보냈지 만 현재 그리드에서는 그렇게 할 수없는 것 같습니다. auto 와 같은 키워드를 사용하여 프로젝트의 시작 위치를 지정할 수 있다면 좋을 것입니다. 이는 "왼쪽 가장자리를 어디에나 놓아주십시오"를 의미합니다. 이것과 유사 :

 <code>.article { grid-column: auto, -1; }</code>

... 이로 인해 왼쪽 가장자리가 선의 끝까지 스팬이됩니다.

위 내용은 CSS의 20 줄에 반응 형 그리드 매거진 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!