[CSS] 그리드

그리드, 뭐할 때 써?

---

두 개 이상의 태그를 나란히 배치하고싶을 때 사용.

어떻게 쓰면 돼?

---

1. 부모태그로 두 태그 묶기

2. css의 display:grid; 선언

3. 그리드 속성값 선언

   • 기본 문법

    @media(화면크기 조건){ 선택자{속성:값;} } 
   

   • 예시

    <div id="grid"> 
    	<div> 첫 번째 태그 </div>
   	<div> 두 번째 태그</div> 
    </div> 
      
   

    #grid {
   	display: grid;
   	grid-template-columns: 1fr 2fr;
   }
   

   fr : 크기 조절이 유연한 css 단위. fraction(분수)의 약어. 그리드에서만 사용 가능한 단위.

그리드 연습 사이트

https://cssgridgarden.com/#ko