더보기
플랙스(따로 지정하는 값 1차원으로 레이아웃을 설정하는 거라면, 그리드는 2차원으로 설정한다
.box*5
결과
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
------------
<body>
<div id="container">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
</div>
</body>
바깥에다가 지정을 해놓고 (커다란 박스를 만들고 그 안에 요소를 배치)
디스플레이 속성은 CSS에서 사용하지만 부모요소와 자식요소로 플렉스함
컨테이너이란 큰 박스로 그리드라는 속성을 주게 된다면 ?
#container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px;
}
.box {
background-color: antiquewhite;
}
.box {
background-color: antiquewhite;
border: 1px solid olive;
}
구분하기 위해서 border 값을 줬다.
#container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 100px;
}
.box {
background-color: antiquewhite;
border: 1px solid olive;
}
grid-template-columns: repeat(3, 1fr);
위와 같이 세개를 반복해서 속성을 준다고 할 때 이런식으로 효율적으로 만들 수 있다 . (즉, 세개의 속성의 값이 똑같아야 함!!)
grid-template-rows: minmax(100px, auto);
높이랑 넓이를 지정 불가일 때? 최대값을 오토로 잡은 이유 > 글자가 빠져나오지 않게 오토로 잡아준다 .
컬럼 개수를 조정해주는 게 있다 오토필이라는 값을 이용하면 됨!!
grid-template-columns: repeat(auto-fit, 200px);
grid-template-columns: repeat(auto-fill, 200px);
화면을 줄이는 것에 맞춰서 컬럼을 조정해준다! (auto-fit, auto-fill)
html
<div id="container">
<div class="box">
box1이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
<div class="box">
box2이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
<div class="box">
box3이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
<div class="box">
box4이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
<div class="box">
box5이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
</div>
<div id="container2">
<div class="box">
box1이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
<div class="box">
box2이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
<div class="box">
box3이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
<div class="box">
box4이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
<div class="box">
box5이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고
있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의
상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의
float 상자가 wrapper 클래스에 해당하는 (en-US) 요소로 둘러싸지도록
문서를 변경하십시오.
</div>
</div>
css
#container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* grid-template-rows: minmax(100px, auto); */
}
#container2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* grid-template-rows: minmax(100px, auto); */
}
.box {
background-color: antiquewhite;
border: 1px solid olive;
}
결과값
이렇듯이
fit와 fill의 차이점을 알게 된다.
더보기
그리드 컨테이너의 너비가 좁을 경우 auto-fill과 auto-fit이 차이가 없는것처럼 보인다. 그러나 그리드 컨테이너의 너비를 넓혀주면 둘의 차이가 드러난다.
auto-fit은 그리드 컨테이너 내부에 공간이 남을 경우, 그 공간을 각 셀들이 나눠 갖는다.
반면 auto-fill은 아무것도 하지 않는것 처럼 보인다.
auto-fill과 auto-fit의 차이점
셀을 구성하고 남는 공간이 존재할 때 둘의 차이가 드러나게 된다.
auto-fill은 설정된 너비에서 가능한 많은 셀들을 만들어 내려고 한다.
겉으로 보기에는 빈 공간이 있더라도 셀의 길이를 늘리지 않는다.
auto-fit은 빈 공간을 셀들이 나누어 가져서 딱 맞게 길이를 설정한다.
겉으로 보기에는 셀의 길이를 전체 너비에 맞게 늘린다.
[CSS-Grid] auto-fit과 auto-fill의 차이점
CSS에서 Grid를 사용할 때 Grid 내부의 셀의 길이를 지정할 때 repeat() 함수를 사용할 수 있다.예를 들어 12개의 같은 길이를 같은 열을 만들고 싶다면와 같이 1fr을 12번 써주는 대신 repeat() 함수를 이
velog.io
grid-column-gap: 20px;
컬럼과 컬럼의 사이에 간격을 준다
grid-row-gap: 20px;
grid-gap: 10px 20px;
첫번째에 입력되는 건 컬럼, 10px에 컬럼의 간격. 20px에 로우의 간격으로 보면 된다.
https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
Class selectors - CSS: Cascading Style Sheets | MDN
The CSS class selector matches elements based on the contents of their class attribute.
developer.mozilla.org
여기서 글씨 한번 보세용
HTML
<div id="container">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<div class="box box5">box5</div>
</div>
CSS
grid-column: 1/4;
이게 가로 인듯!
grid-row-start: 2;
grid-row-end: 4;
이게 세로!
최종 결과
CSS
#container {
background-color: aliceblue;
width: 700px;
height: 700px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.box {
padding: 15px;
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
}
.box1 {
background-color: rgb(90, 155, 152);
grid-column: 1/4;
}
/* .fancy {
text-shadow: 4px 4px 3px #77f;
} */
.box2 {
background-color: rgb(77, 77, 217);
grid-row-start: 2;
grid-row-end: 4;
}
.box3 {
background-color: rgb(132, 198, 200);
grid-column: 2/4;
}
.box4 {
background-color: aquamarine;
grid-column: 3/4;
grid-row-start: 3;
grid-row-end: 4;
}
.box5 {
background-color: rgb(44, 180, 180);
grid-column: 2/3;
grid-row-start: 3;
grid-row-end: 4;
}
컬럼도 잡아주고 로우도 잡아준다
더보기
grid-colum: n/n;
grid-row: n/n; <<이렇게 줄여서 가능
을 활용 해보았다.
#container {
background-color: aliceblue;
width: 700px;
height: 700px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-template-areas:
"box1 box1 box1"
"box2 box3 box3"
"box2 box5 box4";
}
.box {
padding: 15px;
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
}
.box1 {
background-color: rgb(90, 155, 152);
text-shadow: 4px 4px 3px rgb(28, 28, 191);
/* grid-column: 1/4; */
grid-area: box1;
}
.box2 {
background-color: rgb(77, 77, 217);
text-shadow: 4px 4px 3px rgb(27, 27, 53);
/* grid-row-start: 2;
grid-row-end: 4; */
grid-area: box2;
}
.box3 {
background-color: rgb(132, 198, 200);
text-shadow: 4px 4px 3px rgb(126, 126, 217);
/* grid-column: 2/4; */
/* grid-row: 2/3;
grid-column: 2/3; */
grid-area: box3;
}
.box4 {
background-color: aquamarine;
text-shadow: 4px 4px 3px rgb(156, 156, 208);
/* grid-column: 3/4;
grid-row: 2/3; */
grid-area: box4;
}
.box5 {
background-color: rgb(44, 180, 180);
text-shadow: 4px 4px 3px rgb(104, 104, 107);
/* grid-column: 2/4;
grid-row: 3/4; */
grid-area: box5;
}
그리드를 활용하지만 박스에 이름을 부여해서 위치를 잡아준다.
#container {
background-color: aliceblue;
width: 700px;
height: 700px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-template-areas:
"box1 box1 box1"
"box2 box3 box3"
"box2 . box4";
}
박스 오번 자리에다가 " . " 을 입력하면 이렇게 비어져있다.
이렇게 그리드를 활용해보았다!
'프론트엔드 > HTML' 카테고리의 다른 글
| position 속성의 기본값은 static 이다. (0) | 2023.10.26 |
|---|---|
| grid 활용2 (문으로 이용한 활용) (0) | 2023.10.25 |
| CSS 띄움을 이용한 실습 (0) | 2023.10.25 |
| CSS 띄움을 이용한 레이아웃 + CSS clear의 활용 (0) | 2023.10.25 |
| 애니메이션 201페이지 참고 (0) | 2023.10.23 |