CSS 2-3 grid (template, justify-items, align-items, place-items)

fr

 - 크기 설정으로 박스 안에서 주어진 값을 비율로 하여 박스를 가득 채운다. 모바일, pc 황경을 고려해서 만들 때 사용하면 좋음.

 

grid-template

 - grid-template-areas랑 사용방법이 비슷하지만 박스의 사이즈도 정할 수 있는데 fr로 하며 grid-template-columns와 grid-template-rows가 없어도 된다. 2-2에 html과 css를 그대로 사용한다고 생각했을 때 코드를 적용하면

.grid {
    display: grid;
    height: 70vh;
    gap: 10px;
    grid-template:
    "header header header header" 1fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr
    ;
}

화면에 꽉차는 형태가 된다.

 

---

 

justify-items, align-items, place-items

 - 각 자식 요소들이 차지하는 area에서의 가로, 세로를 조절한다.

•  justify-items - 각 자식 요소들이 차지하는 area에서의 가로
• align-items - 각 자식 요소들이 차지하는 area에서의 세로
• place-items: justify-items align-items 라고 생각하면 됨.

 

 - 안 속성으로는

• stretch : grid를 늘려서 grid를 채우게 한다. (자식 요소들에 크기 값이 선언 되어 있으면 적용 안 됨)
• start : item을 cell 시작에 배치한다.
• center : item을 cell 중앙에 배치한다.
• end : item을 cell 끝에 배치한다.

 

예)

.grid {
    display: grid;
    gap: 5px;
    height: 70vh;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    place-items: center end;
}

.header {
    background-color: #2ecc71;
    height: 50px;
    width: 50px;
}

.content {
    background-color: #3498db;
    height: 50px;
    width: 50px;
}

.nav {
    background-color: #8e44ad;
    height: 50px;
    width: 50px;
}

.footer {
    background-color: #f39c12;
    height: 50px;
    width: 50px;
}