Grid / grid-row, grid-column, auto-fill, auto-fit
1. grid-row / grid-column
- 행과 열의 어디부터 어디까지 차지할지 지정하는 속성
.container {
width: 500px;
height: 500px;
border: 2px solid greenyellow;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.item:first-child {
grid-row: 1 / 4;
background-color: aqua;
}
.item:nth-child(2) {
background-color: bisque;
grid-column: 2 / 4;
}
- 1번아이템은 1번부터 4번까지 행을 차지하고, 2번아이템은 2번부터 4번까지 열을 차지한다.
2. auto-fill / auto-fit
- auto-fill : 반응형을 만들때 컨테이너 크기에 따라 가능한 범위 안에서 가장 많은 열 또는 행을 만들어준다.
- auto-fit : 기본적으로 auto-fill과 같이 작동하나 컨테이너의 크기가 콘텐츠의 크기보다 더 커질때 열 또는 행을 만들지 않고 콘텐츠의 크기를 컨테이너에 맞춰 꽉 채운다.
- auto-fill
.container {
border: 2px solid greenyellow;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-auto-rows: 100px;
}
- 화면이 계속 늘어나면 기존 콘텐츠는 최소크기인 100px로 유지하고 그에 맞게 열을 계속 만든다.
- auto-fit
.container {
border: 2px solid greenyellow;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-rows: 100px;
}
- 화면이 계속 늘어나면 열을 더이상 만들지 않고 콘텐츠의 크기가 컨테이너 크기에 맞게 1fr비율로 늘어난다.
Author And Source
이 문제에 관하여(Grid / grid-row, grid-column, auto-fill, auto-fit), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jangmoonseok/Grid-grid-row-grid-column-auto-fill-auto-fit저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)