[TIL] html & css 공부, display: grid;

ㅁㅁㅁㅁ

ㅁㅁㅁㅁ

ㅁㅁㅁㅁ

 

css 그리드 시스템 공부 

 

 

 

.card-container { #parent div
    width : 1200;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, auto));
    grid-template-rows: 300px 300px 300px;  
    row-gap: 30px;
	column-gap: 20px;
}


.card-box {  #child 요소
    width: 480px;
    height: 270px;
    ... }

 

 

auto-fill 속성을 사용하여 자동으로 가로 크기에 맞게 채워지도록 함

minmax에 원하는 최소 최대 크기를 지정하여 카드가 서로 침범하지 않도록 했다

 

높이는 flex할 필요가 없어서 고정된 크기를 주었다

 

 

gap을 사용해서 카드 사이 간격을 미리 주도록 하였는데,

IE쪽에서는 깨져보일 우려가 있다고 함..

 

 

 

---

 

 

grid 시스템으로 카드 박스 공간 나누어보기

 

flex처럼 콘솔 창에 grid라고 뜬다!

 

 

 

 

columns, row로 각각의 grid에 원하는 길이와 크기를 준다.

 

.parent-card {
  display: grid;
  grid-template-columns: 120px 150px 30px;
  grid-template-rows: 40px auto;
}

 

 

 

 

colums의 위치를 생각하며 자리를 지정해준다

가장 왼쪽 위의 꼭지점부터 grid가 서로 맞닿는 부분마다 숫자가 늘어난다고 생각하고 넣어준다!

 

 

기본적으로 가로부터 들어가게 되어있어서 img, title, region은 이미 잘 지정되어있긴 하지만 혹시모르니 위치 지정.

 

.parent-card img {
  height: 100%;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

 

 

 

아래와 같이 각각의 시작, 끝 지점을 지정해줄 수도 있고

한 번에 쓸 경우  ~ : start / end; 지점을 지정해주었다고 생각하면 된다!

 

.chile-title {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start : 1;
  grid-row-end: 2;
}

.new-text-region {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

 

 

 

 

세로 grid, 안쪽 grid만 신경써서 넣어주어도 무방할 듯 하다.

 

.chile-introduction {
    text-overflow: ellipsis;
    grid-column: 2/4;
	grid-row: 2;
}

 

 

[참고]: https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

 

 

---

 

그리드에서의 이미지 처리.

 

display: flex; 처럼 부모요소에 flex한 설정들을. 자식요소에는 크기에 대한 설정을 주면 된다.

 

 

 

 

min-width 값을 너무 크게 주었을때, 100vh

min-heigth 값을 주지 않을 경우

개로웠다...

 

 

 

 

 

부모 요소에는 flex한 속성 및 요소 가운데 정렬,

자식요소에 min-width, min-height 속성을 주어야 해당 박스 가로 세로의 안을 채우도록 할 수 있다....

 

 

의도대로 작성하기 굉장히 어렵게 느껴진다

.random-card-wrapper {
    display: grid;
    grid-template-columns: 48% 4% 48%;
    grid-template-rows: 30px 120px 50px;
}

.random-card-image-box {
    width: 100%;
    height: 200px;
    border-radius: 5px;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    grid-column: 1 / 2;
    grid-row: 1 / 4;
}

.random-card-image-box img {
    min-height: 200px;
    min-width: 200px;
}