Flexbox Grid Tailwind,CSS 차이점

Tailwind를 CSS보다 잘알게 되면서 부족했던 CSS도 채워갈겸 비교하면서 공부해보기로했다.

Flexbox

가로축

TailwindCSS

<div className="flex justify-center">

CSS

.container {
  display: flex;
  justify-content: center; /* 가로축(주 축)에서 중앙 정렬 */
}

세로축

TailwindCSS

<div className="flex items-center">

CSS

.container {
  display: flex;
  align-items: center; /* 세로축(교차 축)에서 중앙 정렬 */
}

Grid

가로축

TailwindCSS

<div className="grid justify-items-center">

CSS

.container {
  display: grid;
  justify-items: start; /* start, end, center, stretch */
}

세로축

TailwindCSS

<div className="grid items-center">

CSS

.container {
  display: grid;
  align-items: center; /* start, end, center, stretch */
}

Grid 와 Flexbox로 구현한 코드

  <div className="grid grid-cols-3 grid-rows-3 justify-items-center items-center h-96 border-4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
      </div>

      <div className="h-96 flex justify-around border-4">
        <div className="flex flex-col justify-around">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>

        <div className="flex flex-col justify-around">
          <div>4</div>
          <div>5</div>
          <div>6</div>
        </div>

        <div className="flex flex-col justify-around">
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>