CSS 그리드 레이아웃 - 필요한만큼의 열로 항목을 만듭니다.

Question

CSS 그리드 레이아웃 (이상적으로는 명시적인 열 그리드가있는)을 사용하고 싶습니다. 그리고 x 축을 따라 여분의 공간을 흡수하거나 다른 항목에서 사용되지 않는만큼의 열을 확장하는 유연한 항목을 갖고 싶습니다.

완벽 솔루션은 항목이 비어있는 모든 열 (flex 속성과 유사 함)에 걸쳐있게 만드는 속성입니다.하지만 CSS 그리드에서는 불가능합니다.

나는 예를 만들기 위해 노력하고 있습니다 :

다음 레이아웃 그리드에 위치하는 여러 요소를 사용합니다. "aside1"영역의 항목이 잘리는 경우 오른쪽에있는 여유 공간을 흡수하는 유연한 헤더를 갖고 싶습니다.

.grid{ 
    display: grid; 
    grid-template-columns: none 1fr 1fr none; 
    grid-template-areas: "header header header aside1" 
         "nav main main aside2" 
         "nav main main aside3" 
         ; 
} 

header { 
grid-area: header; 
} 

main { 
grid-area: main; 
} 

nav { 
grid-area: nav; 
} 

.aside1 { 
grid-area: aside1; 
} 

.aside2 { 
grid-area: aside2; 
} 

.aside3 { 
grid-area: aside3; 
} 

하지만, 오른쪽에있는 모든 항목이 있기 때문에 그것이 레이아웃은 다음과 같이됩니다 열 년대 물론, 한, 헤더가있을 것입니다 :

플렉스 박스 레이아웃에서는 이것을 구현하기 위해 flex : 1 속성을 사용할 수 있습니다.

그리드에서 ... 사용하지 않는 모든 열을 흡수하는 상자 항목이있는 방법이 필요합니다. 어쩌면 그럴 수 없습니다.

내가 재단 유사한 유연한 XY 그리드와 작은 "framwork"를 구축 할 IST 할 노력하고 무엇

.grid{ 
    display: grid; 
    grid-template-columns: none 1fr none; 
} 

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

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

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

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

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

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

하지만, 음 .. 아니 그 시원 (가 학교 프로젝트이다).

그리고 그것은 모두 그리드 시스템을 구축 할 수 있는지 궁금 해서요 :

1. 그리드 항목, x 축을 따라 모든 여유 공간/열을 흡수 - 플렉스 그리드와 파운데이션 가능을 . 여러 행에 걸쳐

2. 그리드 항목 - 플렉스 그리드에 불가능은 다음을 참조하십시오 Is it possible for flex items to align tightly to the items above them? (첫 번째 대답은 꽤 잘 설명)

나는 나 자신이 좀 더 명확하게 바랍니다.

Answer 1

가능한 해결 방법은 명시 적으로 크기가 지정된 열의 경우 grid-template-columns을 사용하고 추가로 유연한 열의 경우 grid-auto-columns을 사용하는 것입니다. grid-template-columns가 명시 적 그리드의 열 크기 동안

는 grid-auto-columns는 암시 그리드의 열 크기.

그래서처럼 열 크기 조정 시도 :

이

grid-template-columns: 100px 100px /* sizes the first two columns */ 
grid-auto-columns: 1fr    /* distributes free space among additional columns; if 
             there is only one column, it consumes all space; */ 

이 포스트가 유용 할 수 있습니다

• CSS Grid: How to make a column span full width when a second column is not there?

나는 당신이있을 때와 유사한 행동을 기대했다