StarRating React -- 7

App.7.css

.App {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 8em;
  grid-template-areas: "title" "rating" "input";
  max-width: 100%;
  margin: auto;
  grid-gap: 1em;
  text-align: center;
}

h1,
.star-rating-container,
.rating-inputs {
  margin: auto;
}

h1 {
  grid-area: title;
}

.star-rating-container {
  grid-area: rating;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rating-inputs {
  grid-area: input;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  text-align: left;
}

.rating-inputs input {
  margin: auto;
}

.rating-inputs label {
  margin: auto 0;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App .star {
  color: gold;
  max-width: 10em;
  margin: auto;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 768px) {
  .App {
    max-width: 768px;
    grid-gap: 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "title title" "rating input";
  }
}

App.7.js

render() {
    // ...
  return (
    <div className="App">
      <h1>React StarRating</h1>
      <div className="star-rating-container">
        <img src={logo} className="App-logo" alt="logo" />
        <StarRating
          rating={rating}
          minRating={minRating}
          maxRating={maxRating}
          starRatio={starRatio}
          limit={limit}
        />
      </div>
      <RatingInputs
        rating = {rating}
        minRating = {minRating}
        maxRating = {maxRating}
        starRatio = {starRatio}
        limit = {limit}
        onStarRatingsUpdate = {this.handleStarRatingsUpdate}
        />
    </div>   
  )
}