본문 바로가기

CSS/Grid

 (8)
Grid의 가로폭을 고정하는 방법 간혹 grid의 child에 따라서 grid의 자식들 width가 원하는 대로 나오지 않고 틀어지는 경우가 있다. 아래처럼 글자 속성에 white-space: nowrap;을 넣으면 글자가 줄바꿈되지 않고 한 줄로 길게 늘어지면서 부모의 grid-template-columns: 1fr 1fr 1fr; 속성을 무시한다. 가나다라 마바사 아자차카 타파하 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .item { border: 1px solid grey; border-radius: 10px; padding: 20px; white-space: nowrap; /* 줄바꿈 x */ } 이를 해결하려면 .item 옆..
CSS 개별 그리드 정렬 - justify-self, align-self, place-self 1. justify-self justify-self: start; // 또는 center, end // 좌우로 정렬 2. align-self align-self: start; // 또는 center, end // 상하로 정렬 3. place-self place-self: center center; // 아래와 같다. // align-self: center; // justify-self: center;
CSS 그리드 라인 네이밍 이용하는 방법과 grid-auto-flow: dense .parent { // 부모 ... grid-template-columns: [first] 1fr [second] 1fr [third] 1fr [fourth] 1fr; } .child:first-child { // 자식 ... grid-column-start: second; grid-column-end: fourth; // 2번째 칸부터 4번째 칸 전까지를 합친다. } grid-auto-flow: dense; // 부모에 추가해야 한다. // 어떻게든 빈 공간을 채운다.
CSS 그리드 합치기 - grid-column, grid-row, span, grid-area 1. grid-column grid-column: 1 / 3; // 1번째 칸에서 3번째 칸 전까지 (first-child에서 사용) // 아래와 같다. // grid-column-start: 1; // grid-column-end: 3; 2. grid-row grid-row: 1 / 3; // 위와 같은 방식 3. 한 줄을 다 차지하게 할 때 grid-column: 1 / -1; 3. span 위에서처럼 위치를 정해주지 않고 상대적으로 자식 그리드의 크기만 설정할 때 grid-column: span 2; // 가로로 두 그리드 차지 grid-row: span 2; // 세로로 두 그리드 차지 5. grid-area grid-area: span 2 / span 2; // 위와 같다. // grid-are..
CSS 전체 그리드 정렬 - justify-content, align-content, justify-items, align-items 1. justify-content justify-content: start; justify-content: center; justify-content: end; 2. align-content align-content: start; align-content: center; align-content: end; 3. place-content place-content: center end; // 아래와 같다. // align-content: center; // justify-content: end; 4. justify-items justify-items: start; justify-items: center; justify-items: end; 5. align-items align-items: start; ali..
CSS 반응형 그리드 - fr, repeat, minmax, max-content, min-content, auto-fit, auto-fill 1. fr grid-template-columns: 1fr 1fr; // 가로를 1 : 1 비율로 꽉채운다. grid-template-columns: 1fr 1fr 1fr; // 1 : 1 : 1 2. repeat() grid-template-columns: repeat(4, 1fr); // 1fr을 4번 반복한다. 3. minmax() grid-template-columns: minmax(150px, 1fr) repeat(3, 1fr); // 최소 크기 150px, 최대 크기 1fr 4. max-content, min-content grid-template-columns: max-content repeat(3, 1fr); // 내용물을 가능한 한 펼쳐서 길이를 정한다. grid-template-colu..
CSS 그리드 자유롭게 배치하기 - grid-template-area firsChild secondChild thirdChild fourthChild .parent { display: grid; grid-auto-rows: 100px; grid-auto-columns: 100px; grid-template-areas: "firstChild firstChild firstChild" "secondChild secondChild fourthChild" "thirdChild thirdChild fourthChild"; /* 위 모양 대로 생성된다. */ border: solid 10px gray; } .firstChild { grid-area: firstChild; background-color: plum; } .secondChild { grid-area: secondChild;..
CSS 그리드(grid) 기본 display: grid; // 자식들을 그리드 방식으로 정렬한다. grid-template-columns: 30px 30px 30px; // 그리드의 가로 길이와 칸 수를 정한다. grid-template-rows: 30px 30px; // 그리드의 세로 길이와 칸 수를 정한다. grid-auto-flow: row; // 또는 column; // 그리드의 확장 방향을 설정 grid-auto-rows: 30px; // 또는 grid-auto-columns: 30px; // 그리드의 개수가 template에서 지정해준 수보다 많으면 // auto-flow와 이 설정에 따라서 자동으로 확장된다. gap: 10px; // grid-gap을 대체한다. // 그리드 사이의 간격 설정

티스토리툴바