Grid 2

Place Items

 

item들을 배치하는 방법

justify-item , align-item, place-item이 있다.

 

justify-item

.grid {
    display: grid;
    gap: 5px;
    height: 50vh;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    justify-items: stretch;
}

justify-item의 기본형은 stretch이다.

 

justify-items: start;

justify-items: end;

align-item

align-item은 가로로 쭉 늘어진 형태를 보인다.

    align-items: start;

 

 

    align-items: end;

 

place-item

 

place-items: stretch center;

왼쪽은 수직을 의미, 오른쪽은 수평을 의미한다!

 

 

 

 

---

Place Content

중요!

place-item은 각 사각형에 대해 적용

place-content는 모든 사각형에 다 같이 함께 적용

 

 

justify-content는 grid를  수평적으로 움직이는 것이다.

 

 

align-content: grid를 수직으로 움직이는 것이다.

 

 

이 두 가지를 합친 것이 위에서 사용했던 것처럼 place이다.

 

place-content를 사용해 배치해보면

 

.grid {
    display: grid;
    background-color: gray;
    color: white;
    gap: 5px;
    height: 250vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    place-content: end center;
}

 

 

수직의 끝 end 수평적 위치 center에 잘 배치되어 있는 것을 볼 수 있다.

 

 

---

 

Auto Columns And Row

 

 

한 개별 상자에 대해서만 변경할 수 있는 방법이 있다.

 

header에 대해서만 변경하기 위해서 작성을 해보면

 

.header {
    background-color: #2ecc71;
    align-self: end;
    justify-self: center;
}

 

 

이런 결과 값이 나온다. 코드를 더 짧게 하고 싶다면

 

place를 사용하면 된다.

.header {
    background-color: #2ecc71;
    place-self: end center;
}

이렇게 작성하여도 같은 결괏값이 나온다.

 

---

grid-auto-rows / grid-auto-columns / grid-auto-flow 

.grid {
    display: grid;
    color: white;
    gap: 5px;
    height: 50vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
}

.item:nth-child(odd) {
    background-color: #2ecc71;
}

.item:nth-child(even) {
    background-color: #3498db;
}

 

 

코드를 이렇게 작성했을 때 결과창을 보면 이렇게 된 것을 볼 수 있다.

이렇게 나온 이유는

    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);

이곳에서 4번만 100px를 줬기 때문에 그 뒤는 저렇게 작게 나온 것이다.

이것을 해결 하기 위해

grid-auto-rows / grid-auto-columns를 사용하면 된다.

 

 

.grid {
    display: grid;
    color: white;
    gap: 5px;
    height: 50vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-auto-rows: 100px;
}

이렇게 작성하면 해결이 된다.

 

 

grid-auto-flow

 

.grid {
    display: grid;
    color: white;
    gap: 5px;
    height: 50vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-auto-flow: column;
}

 

grid-auto-flow는 flex-direction과 같은 역할을 한다.

 

 

이제 이것을 위에와 같이 자동으로 만들어주고 싶으면

.grid {
    display: grid;
    color: white;
    gap: 5px;
    height: 50vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-auto-flow: column;
    grid-auto-columns: 100px;
}

 

 

이렇게 작성해주면 해결이 된다.

 

---

minmax

 

크기를 지정할때 사용한다.

 

.grid {
    display: grid;
    color: white;
    gap: 5px;
    height: 50vh;
    grid-template-columns: repeat(5, minmax(30px, 1fr));
    grid-template-rows: repeat(4, 100px);
}

 

 

이렇게 작성을 하면 크기를 아무리 줄이려고 해도

 

30px아래로는 크기가 줄지 않는다.

 

minmax(최솟값, 최댓값) 이렇게 작성하면 된다.

---

Auto-fit / Auto-fill

 

auto-fill이 하는 역할은 column을 가능한 한 많이(우리가 설정한 사이즈 내에서) 만들어주는 것이다.

해당 row를 column이 비어있어도 column이 있는 만큼 가능한 한 많이 만든다

 

auto-fit이 하는 역할은 최대한 늘려서 row에 딱 맞추는 역할을 한다.

row에 딱 맞추므로 빈 공간이 없다!

 

 

.grid1 {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid2 {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

 

---

min-content / max-content

min-content

box를 만든다고 하면 content가 작아질 수 있는 만큼 작아지는 것이다

 

max-content

box를 만든다고 하면 content가 필요한 만큼 크게 만드는 것이다.

 

.grid {
    color: white;
    display: grid;
    gap: 5px;
    grid-template-columns: min-content max-content;
    grid-auto-rows: 100px;
    margin-bottom: 30px;
}

5번

.grid {
    color: white;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(5, minmax(max-content, 1fr));
    grid-auto-rows: 100px;
    margin-bottom: 30px;
}

 

auto-fit

 

.grid {
    color: white;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
    grid-auto-rows: 100px;
    margin-bottom: 30px;
}

 

 

이것을 사용하는 이유는 박스 안에 어떤 것이 듣은 지에 따라 크기가 반응형으로 바뀌기 때문에 사용한다.