Grid 레이아웃 한방 정리. 고정값 가변값

레이아웃

.widgetArea { display: grid; grid-template-columns: 310px 456px auto 360px; grid-template-rows: 510px 310px; width: 100%; max-width: 1780px; gap: 2.5rem; } 

.widget1 { grid-column: 1 / 3; grid-row: 1/2; } 
.widget2 { grid-column: 3 / -1; grid-row: 1/2; } 
.widget3 { grid-column: 1 / 2; grid-row: 2/-1; } 
.widget4 { grid-column: 2 / 3; grid-row: 2/-1; } 
.widget5 { grid-column: 3 / 4; grid-row: 2/-1; } 
.widget6 { grid-column: 4/-1; grid-row: 2/-1; }

 

최대최소값 

minmax(700px, 768px)

.subArea { display: grid; grid-template-columns: minmax(700px, 768px) minmax(700px, auto); gap: 2rem; }

---

 grid-template-columns: 30px 200px auto 100px;

---

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}
.item1 {
  grid-row-end: span 3;
}

---

.item1 {
  grid-column-start: 2;
}

---

.item1 {
  grid-column: 1 / span 3;
}

 

미리보기 https://www.w3schools.com/cssref/tryit.php?filename=trycss_grid-column

W3Schools online HTML editor