CSS Grid 中的元素拉伸

【问题标题】：Elements stretching in CSS GridCSS Grid 中的元素拉伸
【发布时间】：2019-03-07 14:07:05
【问题描述】：

我目前正在组装一个流体网格。我遇到的问题是，由于其中文本的长度，列的高度会有所不同。考虑到这一点，它使我的行伸展，从而使它们内部的元素也伸展。更具体地说，下面示例中显示的蓝色按钮，视口宽度为 960 像素及以上。如何防止这些元素拉伸并保持其原始尺寸？

.item {
  display: -ms-grid;
  display: grid;
  border-bottom: 1px solid #dceaec;
  padding: 30px 0 22px;
  -ms-grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
}

.item-thumbnail {
  -ms-grid-area: item-thumbnail;
  grid-area: item-thumbnail;
}

.item-heading {
  margin-bottom: 16px;
  font-size: 14px;
  color: #0076ff;
  letter-spacing: .8px;
  text-transform: uppercase;
  -ms-grid-area: item-heading;
  grid-area: item-heading;
}

.item-product {
  -ms-grid-area: item-product;
  grid-area: item-product;
}

.item-name {
  margin-bottom: 20px;
  font-family: LabGrotesque;
  font-size: 16px;
  font-weight: 900;
  color: #111516;
}

.item-price {
  margin-bottom: 4px;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.65;
  color: #111516;
  letter-spacing: normal;
}

.item-source {
  margin-bottom: 16px;
  font-size: 16px;
  color: #848f91;
  letter-spacing: -.3px;
}

.item-button {
  display: block;
  margin-bottom: 20px;
  border-radius: 25px;
  padding: 14px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2.6px;
  background-color: #007eff;
  -ms-grid-area: item-button;
  grid-area: item-button;
}

.item-footer {
  -ms-grid-area: item-footer;
  grid-area: item-footer;
}

.item-description {
  margin-bottom: 40px;
}

.item-read-more {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: #111;
  text-decoration: none;
  letter-spacing: 2.6px;
}

@media (min-width: 600px) {
  .item {
    -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
    grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
  }
}

@media (min-width: 960px) {
  .grid {
    display: -ms-grid;
    display: grid;
    margin-bottom: 30px;
    border-bottom: 3px solid #111;
    padding-bottom: 16px;
    -ms-grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .item-heading {
    margin-bottom: 42px;
  }
  .item {
    border-bottom: none;
    padding-top: 0;
    padding-right: 13px;
    -ms-grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
    grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
  }
  .item:not(:first-of-type) {
    border-left: 1px solid #dceaec;
    padding-left: 13px;
  }
  .item-button {
    max-width: 150px;
  }
}
<div class="grid">
  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. Morbi non libero egestas, imperdiet orci sit amet, dignissim augue. Fusce fermentum aliquet dolor.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. 
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
</div>

【问题讨论】：

  • 如果我对问题的理解正确，您将无法在网格容器中实现等高行。这是 CSS 网格和 flex 的常见问题和限制。因为网格项目不是兄弟姐妹（它们更像表兄弟），所以它们没有关联，也不能相互关联。您可以将它们全部放在同一个容器中，等待subgrid 功能的实现，或者使用脚本。
  • 将align-items: flex-start 添加到item 类以解决拉伸问题...
  • @Michael_B 你能详细说明将它们全部放在同一个容器中吗？
  • @kukkuz 直到现在我才知道align-items 也适用于网格布局。谢谢你救了我这个。我将尝试重新打开它，因为@Michael_B 在将其标记为重复时没有建议任何帖子指出这一点。
  • @kukkuz Michael_B 重新打开了帖子，所以请随时发布您的答案。请注意，我将flex-start 应用于网格。

标签： html css alignment css-grid


【解决方案1】：

根据问题的 cmets，对于 拉伸 问题，您可以将 align-items: flex-start 添加到 grid 类 - 参见下面的演示：

.item {
  display: -ms-grid;
  display: grid;
  border-bottom: 1px solid #dceaec;
  padding: 30px 0 22px;
  -ms-grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
}

.item-thumbnail {
  -ms-grid-area: item-thumbnail;
  grid-area: item-thumbnail;
}

.item-heading {
  margin-bottom: 16px;
  font-size: 14px;
  color: #0076ff;
  letter-spacing: .8px;
  text-transform: uppercase;
  -ms-grid-area: item-heading;
  grid-area: item-heading;
}

.item-product {
  -ms-grid-area: item-product;
  grid-area: item-product;
}

.item-name {
  margin-bottom: 20px;
  font-family: LabGrotesque;
  font-size: 16px;
  font-weight: 900;
  color: #111516;
}

.item-price {
  margin-bottom: 4px;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.65;
  color: #111516;
  letter-spacing: normal;
}

.item-source {
  margin-bottom: 16px;
  font-size: 16px;
  color: #848f91;
  letter-spacing: -.3px;
}

.item-button {
  display: block;
  margin-bottom: 20px;
  border-radius: 25px;
  padding: 14px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2.6px;
  background-color: #007eff;
  -ms-grid-area: item-button;
  grid-area: item-button;
}

.item-footer {
  -ms-grid-area: item-footer;
  grid-area: item-footer;
}

.item-description {
  margin-bottom: 40px;
}

.item-read-more {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: #111;
  text-decoration: none;
  letter-spacing: 2.6px;
}

@media (min-width: 600px) {
  .item {
    -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
    grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
  }
}

@media (min-width: 960px) {
  .grid {
    display: -ms-grid;
    display: grid;
    margin-bottom: 30px;
    border-bottom: 3px solid #111;
    padding-bottom: 16px;
    -ms-grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: flex-start; /* ADDED */
  }
  .item-heading {
    margin-bottom: 42px;
  }
  .item {
    border-bottom: none;
    padding-top: 0;
    padding-right: 13px;
    -ms-grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
    grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
  }
  .item:not(:first-of-type) {
    border-left: 1px solid #dceaec;
    padding-left: 13px;
  }
  .item-button {
    max-width: 150px;
  }
}
<div class="grid">
  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. Morbi non libero egestas, imperdiet orci sit amet, dignissim augue. Fusce fermentum aliquet dolor.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. 
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
</div>

【讨论】：

    【解决方案2】：

    您可以使用justify-items（如justify-items: start;）来防止他们的孩子拉伸。

    css-tricks.com 上有一篇关于 CSS 网格的非常棒的文章/备忘单

    .item {
  display: -ms-grid;
  display: grid;
  border-bottom: 1px solid #dceaec;
  padding: 30px 0 22px;
  -ms-grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  justify-items: start;
}

.item-thumbnail {
  -ms-grid-area: item-thumbnail;
  grid-area: item-thumbnail;
}

.item-heading {
  margin-bottom: 16px;
  font-size: 14px;
  color: #0076ff;
  letter-spacing: .8px;
  text-transform: uppercase;
  -ms-grid-area: item-heading;
  grid-area: item-heading;
}

.item-product {
  -ms-grid-area: item-product;
  grid-area: item-product;
}

.item-name {
  margin-bottom: 20px;
  font-family: LabGrotesque;
  font-size: 16px;
  font-weight: 900;
  color: #111516;
}

.item-price {
  margin-bottom: 4px;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.65;
  color: #111516;
  letter-spacing: normal;
}

.item-source {
  margin-bottom: 16px;
  font-size: 16px;
  color: #848f91;
  letter-spacing: -.3px;
}

.item-button {
  display: block;
  margin-bottom: 20px;
  border-radius: 25px;
  padding: 14px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2.6px;
  background-color: #007eff;
  -ms-grid-area: item-button;
  grid-area: item-button;
}

.item-footer {
  -ms-grid-area: item-footer;
  grid-area: item-footer;
}

.item-description {
  margin-bottom: 40px;
}

.item-read-more {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: #111;
  text-decoration: none;
  letter-spacing: 2.6px;
}

@media (min-width: 600px) {
  .item {
    -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
    grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
  }
}

@media (min-width: 960px) {
  .grid {
    display: -ms-grid;
    display: grid;
    margin-bottom: 30px;
    border-bottom: 3px solid #111;
    padding-bottom: 16px;
    -ms-grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .item-heading {
    margin-bottom: 42px;
  }
  .item {
    border-bottom: none;
    padding-top: 0;
    padding-right: 13px;
    -ms-grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
    grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
  }
  .item:not(:first-of-type) {
    border-left: 1px solid #dceaec;
    padding-left: 13px;
  }
  .item-button {
    max-width: 150px;
  }
}
    <div class="grid">
  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. Morbi non libero egestas, imperdiet orci sit amet, dignissim augue. Fusce fermentum aliquet dolor.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
</div>

    【讨论】：

      猜你喜欢
      • 2017-05-21
      • 2022-11-20
      • 2012-09-28
      • 2016-03-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode