SOURCE

<div class="book-list">
  <div class="book-item">
    <img src="https://img1.doubanio.com/view/subject/s/public/s34496227.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
      <p class="book-rating">Book Rating</p>
      <p class="book-description">Book Description</p>
    </div>
  </div>
  <!-- 重复 -->
   <div class="book-item">
    <img src="book-cover.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
      <p class="book-rating">Book Rating</p>
      <p class="book-description">Book Description</p>
    </div>
  </div>
   <div class="book-item">
    <img src="book-cover.jpg" alt="Book Cover">
    <div class="book-info">
      <h3 class="book-title">Book Title</h3>
      <p class="book-author">Book Author</p>
      <p class="book-publisher">Book Publisher</p>
      <p class="book-rating">Book Rating</p>
      <p class="book-description">Book Description</p>
    </div>
  </div>
</div>

.book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自适应网格布局 */
  grid-gap: 20px;
}

.book-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  background-color: #f0f0f0;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
}

.book-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.book-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
}

.book-author,
.book-publisher,
.book-rating,
.book-description {
  font-size: 1rem;
  margin: 5px 0;
}