[HTML] 반응형 사이즈 조절

HTML

<div id="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

CSS

#main {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*컨테이너에 Grid 트랙의 크기들을 지정해주는 속성*/ /* 열(column)의 배치*/ /*열이 3개니깐 1fr이 3개다*/
  grid-template-rows: repeat(9, minmax(100px, auto));
}

.item:nth-child(1) {  
	grid-column: 1 / span 1;	/*열 1번 칸에서..*/
	grid-row: 1 / span 10; 
}

.item:nth-child(2) {	
	grid-column: 3 / span 1;  	/*열 3번 칸에서..*/
	grid-row: 1 / span 10; 
}

.item:nth-child(3) {	
	grid-column: 2 / span 1;  	/*열 2번 칸에서..*/
	grid-row: 1 / span 10;  
}

 

 

CSS

#main {
  display: grid;
  grid-template-columns: repeat(24, 1fr); /* 열(column)의 배치*/ /*열이 24개이며, 사이즈는 1fr 동일*/
  grid-template-rows: repeat(9, minmax(100px, auto));
}

.item:nth-child(1) {  
	grid-column: 1 / span 5;	/*열 1번 칸에서..*/
	grid-row: 1 / span 10; 
}

.item:nth-child(2) {	
	grid-column: 20 / span 5;  	/*열 20번 칸에서..*/
	grid-row: 1 / span 10; 
}

.item:nth-child(3) {	
	grid-column: 6 / span 14;  	/*열 6번 칸에서..*/
	grid-row: 1 / span 10;  
}