[CSS] 그리드 : Grid Layout에 발가락을 담궈보자.

개인적으로 Grid가 익숙하지 않다 보니 자꾸 사용하지 않게 되길래

오늘 아아주 기초적인 그리드로 발을 담가보려 한다....ㅎㅎㅎㅎㅎ

극극극초급용이다! 😎 🏖 

 

---

CSS GRID LAYOUT

 

 

우선 따로 reset.css 파일을 @import해 기본 값들을 초기화해주었다.

 

CSS Tools: Reset CSS

 

display: grid는

 

gird-templete-      ?       속성을 통해 가로나 세로로의 화면 분배 비율을 설정해 줄 수 있고,

• grid-templete-rows
• grid-templete-coulmns

 

     ?      -gap 속성을 통해 사이의 간격을 조절해 줄 수 있다.

• row-gap
• column-gap

 

 

오늘은  한 번에 그리드를 나누지않고,

각 각 컨테이너를 display: grid로 설정해준 뒤

grid-temple-columns, column-gap을 이용하여

가로 그리드의 분배 비율과 아이템 사이의 공간을 따로 설정해봤다.

 

.container1 {
    display: grid;
    grid-template-columns: 100%;
}

.container2 {
    display: grid;
    grid-template-columns: 66% 33%;
    column-gap: 10px;
}

.container3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
}
.container4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
}

.container5 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10px;
}

.container6 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: 10px;
}

 

제법 그리드 같다!

다음은 그리드의 속성들에 대해 조금 더 자세히 알아보자. 

---

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️

***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다!    ***