网格不变

Question

我的网格出现问题，无法显示我想要的尺寸。我有一个 2×2 网格：
L1是产品图片，
r1 是新闻通讯注册，
R2 是带有浏览全部链接的标题，
R2 是一个产品网格 – 6 张产品图片，包含产品详细信息和星级评价。

根据我的理解，我的网格模板应该意味着L1和R1占据页面的⅓，L2，R2应该占据另外的⅔。

然而这并没有发生。相反，L1 和 R1 被挤压到左侧，可能是页面的 ⅛，而且无论我做什么，L1、R1 的宽度都不会改变。

.shop-page-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  border: 1px solid #888;
}

.L1,
.R1,
.L2,
.R2 {
  border: 1px solid #888;
}

.R1,
.L2,
.R2 {
  padding: 20px;
}

.L1 img,
.R2 img {
  width: 100%;
  /* Adjust this if needed */
  height: auto;
}

.R1 .newsletter-content {
  text-align: left;
}

form {
  display: flex;
  align-items: center;
}

form label {
  margin-right: 10px;
}

form input {
  max-width: 200px;
}

form button {
  margin-left: 10px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.image-grid img {
  width: 100%;
  height: auto;
}

.browse-all-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer;
  margin-top: 15px;
}

.image-grid .small-image {
  width: 100%;
  /* Adjust as needed */
  max-width: 150px;
  /* Set a maximum width to control size */
  height: auto;
  border-radius: 8px;
}

.R2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 200px;
}

.product {
  display: flex;
  align-items: center;
  padding-right: 220px;
}

.product img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-right: 10px;
}

.product-info {
  flex-grow: 1;
}

.product h4,
.product p {
  margin: 0;
}

.star-rating {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa-star.checked {
  color: gold;
}

.fa-star {
  color: white;
}

HTML
<div class="shop-page-grid">
   <div class="L1">
     <!-- Content for L1 - Single Image -->
      <img src="Images/Catergories 3.jpg" alt="Single Image" 
class="img-fluid small-image">
   </div>
   <div class="R1">
      <!-- Content for R1 - Newsletter Content and Form -->
      <div class="newsletter-content">
         <h2>Newsletter</h2>
      </div>
      <form action="subscribe" method="post">
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" 
placeholder="Enter your email" required>
         <button type="submit">Subscribe</button>
      </form>
   </div>
   <div class="L2">
      <!-- Content for L2 - Shop Local Products -->
      <h3>Shop Local Products</h3>
      <p>Explore a variety of local products and support your 
community.</p>
      <button class="browse-all-button">Browse All</button>
   </div>
   <div class="R2">
     <div class="image-grid">
         <!-- Product 1 -->
         <div class="product">
            <img src="Images/Product 1.jpg" class="img-fluid 
small-image" alt="Product 1">
            <h4>Product Name 1</h4>
            <p>$50.00</p>
            <div class="star-rating">
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star"></span>
               <span class="fa fa-star"></span>
            </div>
         </div>
         <!-- Product 2 -->
          <div class="product">
            <img src="Images/Product 2.jpg" class="img-fluid 
small-image" alt="Product 2">
            <h4>Product Name 2</h4>
            <p>$65.00</p>
            <div class="star-rating">
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star"></span>
               <span class="fa fa-star"></span>
            </div>
         </div>
         <!-- Product 3 -->
         <div class="product">
            <img src="Images/Product 3.jpg" class="img-fluid 
small-image" alt="Product 3">
            <h4>Product Name 3</h4>
            <p>$80.00</p>
            <div class="star-rating">
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star"></span>
               <span class="fa fa-star"></span>
            </div>
         </div>
         <!-- Product 4 -->
         <div class="product">
            <img src="Images/Product 4.jpg" class="img-fluid 
small-image" alt="Product 4">
            <h4>Product Name 4</h4>
            <p>$80.00</p>
            <div class="star-rating">
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star"></span>
               <span class="fa fa-star"></span>
            </div>
         </div>
         <!-- Product 5 -->
         <div class="product">
            <img src="Images/Product 5.jpg" class="img-fluid 
small-image" alt="Product 5">
            <h4>Product Name 5</h4>
            <p>$80.00</p>
            <div class="star-rating">
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star"></span>
               <span class="fa fa-star"></span>
            </div>
         </div>
         <!-- Product 6 -->
         <div class="product">
            <img src="Images/Product 6.jpg" class="img-fluid 
small-image" alt="Product 6">
            <h4>Product Name 6</h4>
            <p>$80.00</p>
            <div class="star-rating">
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star checked"></span>
               <span class="fa fa-star"></span>
               <span class="fa fa-star"></span>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

尝试使用百分比

grid-template-columns: 33% 67%;

fr 单元使用剩余空间。问题是您的产品网格占用了太多空间，因此网格的第一列没有太多剩余空间。

此外，您的产品类别可以充分利用方向列属性

flex-direction: column;