CSS grid rowspan 효과

1 개요

CSS grid rowspan 효과

2 예시 1

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.box1 {
  background: red;
  grid-row: span 2;
}
.box2 { background: orange; }
.box3 { background: yellow; }
</style>

<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
</div>

3 예시 2

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.box1 { background: red; }
.box2 {
  background: orange;
  grid-row: span 2;
}
.box3 { background: yellow; }
</style>

<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
</div>

4 예시 3

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.box1 { background: red; }
.box2 { background: orange; }
.box3 {
  background: yellow;
  grid-column: span 2;
}
</style>

<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</div>

5 같이 보기

• CSS grid
• CSS grid-row
• CSS grid-column
• HTML 테이블 rowspan