JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<p>place-content 와 place-items의 차이</p>
<div class="demo1">
  <div class="type01"></div>
  <div class="type02"></div>
</div>
<div class="demo2">
  <div class="type01"></div>
  <div class="type02"></div>
</div>

SCSS

.demo1,
.demo2 {
  display: grid;
  height: 200px;
  border: 3px solid #000;
  > div {
    width: 30px;
    height: 30px;
    background: red;
    &.type02 {
      background: green;
    }
  }
}
.demo1 {
  place-content: center;
}
.demo2 {
  place-items: center;
}