FE 개발자의 성장 기록👩‍💻

grid 관련 속성 : grid-auto-flow, grid-auto-rows, grid-auto-columns 본문

HTML&CSS

grid 관련 속성 : grid-auto-flow, grid-auto-rows, grid-auto-columns

yeeebin 2022. 10. 20. 16:41

grid-auto-rows와 grid-auto-columns는 컨테이너 속성이다.

 

기본 구조

<body>
    <div class="container">
        <div class="item">one</div>
        <div class="item">two</div>
        <div class="item">three</div>
        <div class="item">four</div>
        <div class="item">five</div>
        <div class="item">six</div>
        <div class="item">seven</div>
        <div class="item">eight</div>
    </div>
</body>
.container{
    border: 5px dashed orange;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    
    /*
    grid-auto-flow: row;
    grid-auto-flow: column;
    grid-auto-rows: 100px;
    grid-auto-columns: 100px;
    */
}

.item{
    border: 2px solid pink;
    background-color: lemonchiffon;
    width: 50px;
    height: 50px;
    margin: 3px;
    font-weight: 700;
}

css 속성을 통해 display를 grid로 설정하였고, grid-template-rows와 grid-template-columns 속성을 통해 2행 2열로 구성하였다.

 

grid-auto-flow : grid 자식요소를 채우는 방향을 설정하는 속성

grid-auto-rows : 'grid-auto-flow: row'일 때, 추가되는 행의 크기를 설정

grid-auto-columns : 'grid-auto-flow: column'일 때, 추가되는 열의 크기를 설정

grid-auto-flow: row  &  grid-auto-rows

grid-auto-flow: row; ( 기본값 ) : 요소들을 하나의 행에 설정한 개수 만큼 다 채우면 다음 행에 이어 채움. 

첫 번째 행부터 차근차근 채워나가는 것을 확인할 수있다. 위에서 설정했던 2행을 모두 채우고 남은 요소들은 ( 5, 6, 7, 8번째 요소들 ) 아래에 행을 더 추가하며 채워지는 것을 확인할 수 있다. 

 

grid-auto-rows: 100px; : 추가되는 행에 대해서 100px을 차지하도록 함.

1, 2, 3, 4번 요소들이 위치한 1번 행과 2번 행은 부모 요소의 세로길이를 1:1로 차지하고 있지만 추가된 행 ( 3번 행과 4번 행 )은 각각 100px을 차지하고 있다. 

 

grid-auto-flow: column  &  grid-auto-columns

grid-auto-flow: column; : 요소들을 하나의 열에 설정한 개수 만큼 다 채우면 다음 열에 이어 채움.

첫 번째 열부터 자식요소들이 채워지는 것을 확인 할 수 있다. 2열을 모두 채우고 남은 요소들은 ( 5, 6, 7, 8번째 요소들 ) 오른쪽에 열을 더 추가하며 채워지는 것을 확인할 수 있다. ( 위에서 각 열을 1fr이라고 설정했으므로 1열과 2열은 부모요소의 가로폭을 1:1의 비율로 차지한다. 그러나 추가되는 열에 대해서는 적용되지 않는다.

 

grid-auto-columns: 100px; : 추가되는 열에 대해서 100px을 차지하도록 함.

1, 2, 3, 4번 요소들이 위치한 1번 열과 2번 열은 부모 요소의 가로길이를 1:1로 차지하고 있지만 추가된 열 ( 3번 열과 4번 열 )은 각각 100px을 차지하고 있다. 

'HTML&CSS' 카테고리의 다른 글

Container 속성 - justify-content, align-items, align-content  (0) 2022.10.19
'HTML&CSS' Related Articles more
Comments