The US flag in React + CSS

Flag.css

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0px;
  aspect-ratio: 1.9;
}

.stripe {
  flex-basis: 0;
  flex-grow: 1;
}
.stripe.white {
  background-color: #ffffff;
}
.stripe.red {
  background-color: #b31942;
}

.stars-box {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;

  background-color: #3c3b6e;
  width: 40%;
  height: 53.85%;
}

.star-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8.289%;
  margin-top: -0.76%;
  margin-bottom: -0.76%;
}

.star {
  aspect-ratio: 1/1;
  width: 8.105%;
}

Flag.tsx

import { FC } from 'react';
import starSVG from './star.svg';
import './Flag.css';

export const Flag: FC = () => {
  const stripeNames = Array(13)
    .fill(0)
    .map((_, row) => (row % 2 == 0 ? 'stripe red' : 'stripe white'));
  const starsPerRow = Array(9)
    .fill(0)
    .map((_, row) => (row % 2 == 0 ? 6 : 5));

  return (
    <div className="container">
      {stripeNames.map((name, i) => (
        <div key={i} className={name} />
      ))}
      <div className="stars-box">
        {starsPerRow.map((stars, i) => (
          <div key={i} className="star-row">
            {Array(stars)
              .fill(0)
              .map((_, i) => (
                <img key={i} src={starSVG} className="star" />
              ))}
          </div>
        ))}
      </div>
    </div>
  );
};