차근차근 배움터

auto-fill & auto-fit media query를 걱정하지 않고 만들 수 있는 방법이기도 하다

max-content 줄에서 벗어나지 않으면서 최대한 넓은 자리를 차지하려는 성질 minmax ... *** 강의 다시 듣기 ***

강의를 듣기 전에 몇 문제 풀어보는데 꽤 유용하다 start가 end 값보다 작을 필요는 없다 grid 를 상세히 정리해준 블로그 발견! https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com

https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com 귀여운 grid 연습 사이트를 찾았다

grid-template-areas 를 이용해서 각 셀마다 이름을 지정할 수 있다 매우 직관적이어서 오히려 이해하기 쉬운 듯 대신 정확하게 grid-template-areas 에서 모양을 구현해야 한다. .container { display: grid; // grid-template-rows: repeat(5, 120px); // grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end]; // grid-template-rows: 100px 200px 400px 100px; grid-template-rows: [header-start] 100px [heade..

grid line에 이름을 지을 수 있다 복잡한 부분......... .container { display: grid; // grid-template-rows: repeat(5, 120px); // grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end]; // grid-template-rows: 100px 200px 400px 100px; grid-template-rows: [header-start] 100px [header-start box-start] 200px [box-end main-start] 400px [main-end footer-start]..

grid-gap 을 빼먹었다 세 칸을 차지 하지 않아도 될 것 같기도 하고

과제 완료 비슷한 것 같다? Header Small box-1 Small box-2 Small box-3 Side bar Main Content Footer .container { display: grid; grid-template-rows: repeat(5, 120px); grid-template-columns: repeat(4, 120px); & * { background-color: orange; grid-gap: 10px; } .item-1 { background-color: red; grid-column: 1/-1; } .item-5 { grid-column: 4/5; grid-row: 2/5; background-color: royalblue; } .item-6 { background-colo..

같은 셀에 두 가지 항목을 배치할 수 있다 위로 올리고 싶으면 z-index 이용하기 끝부분이 어디까지 있는 지 모를 때는 -1 작성 .container { background-color: #eee; width: 1000px; margin: 30px auto; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 200px) 1fr; grid-template-columns: repeat(3, 1fr); // grid-row-gap: 20px; // grid-column-gap: 20px; grid-gap: 30px; } .item { border: 1px solid black; padding: 20px; fo..

&--1 { background-color: orange; // grid-row-start: 2; // grid-row-end: 3; // grid-column-start: 2; // grid-column-end: 3; grid-row: 2/3; grid-column: 2/3; } 아래와 같이 grid-area로 쓸 수 있지만 난 더 헷갈린다!