如何使用CSS网格与此类似的东西？

Question

我正在尝试获取一个以页面为中心的6个元素的网格布局，如下所示：

但是我不能使网格位于图像中心，知道吗？

   
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color: #999999;
      padding: 10px;
    }
    
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
      &.one{
      	background-image: url("img/mainmeu/e.png");
    	}
      &.two{
      	background-image: url("img/mainmeu/b.png");
     	}
    }

   

 <div class="grid-container">
      <div class="grid-item one">1</div>
      <div class="grid-item two">2</div>
      <div class="grid-item three">3</div>  
      <div class="grid-item four">4</div>
      <div class="grid-item five">5</div>
      <div class="grid-item six">6</div>  
    </div>

Answer 1

只需使用justify-content: center将网格项居中。还可以使用grid-gap值来获取所需的布局。参见下面的演示：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #999999;
  padding: 10px;
  grid-row-gap: 20px; /* added */
  grid-column-gap: 10px; /* added */
  justify-content: center; /* added */
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  background-image: url("https://via.placeholder.com/200");
  background-size: cover; /* image as cover */
}

<div class="grid-container">
  <div class="grid-item one">1</div>
  <div class="grid-item two">2</div>
  <div class="grid-item three">3</div>
  <div class="grid-item four">4</div>
  <div class="grid-item five">5</div>
  <div class="grid-item six">6</div>
</div>

如果要更改网格项的大小，则可以使用padding（因为其始终基于宽度）来相对尺寸。在下面的演示中，我使用了padding-top: 60%（如果使用100％，您将得到一个正方形的网格项）：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #999999;
  padding: 10px;
  grid-row-gap: 20px; /* added */
  grid-column-gap: 10px; /* added */
  justify-content: center; /* added */
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  background-image: url("https://via.placeholder.com/200");
  background-size: cover; /* image as cover */
  box-sizing: border-box;
  
  /* added width */
  width: 20vw;
  /* center inner content using flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item:after {
  padding-top: 60%; /* according to your aspect ratio */
  content: '';
  display: block;
}

<div class="grid-container">
  <div class="grid-item one">1</div>
  <div class="grid-item two">2</div>
  <div class="grid-item three">3</div>
  <div class="grid-item four">4</div>
  <div class="grid-item five">5</div>
  <div class="grid-item six">6</div>
</div>

Answer 2

1. 将column-gap和row-gap用于网格间距。

2. 使用background-image属性将图像居中在网格框中

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #999;
    column-gap: 10px;
    padding: 10px;
    row-gap: 30px;
    justify-items: left;
    align-items: center;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
    width: 120px;
    height: 120px;
    align-content: center;
    display: inline-grid;
}

.grid-item.one {
    background-image: url("https://via.placeholder.com/200x200");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.grid-item.two {
    background-image: url("https://via.placeholder.com/200x200");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="grid-container">
    <div class="grid-item one">1</div>
    <div class="grid-item two">2</div>
    <div class="grid-item three">3</div>
    <div class="grid-item four">4</div>
    <div class="grid-item five">5</div>
    <div class="grid-item six">6</div>
</div>

Answer 3

由于您没有设置尺寸，请在父级上使用inline-grid，并在父级上使用text-align:center。

body {
  text-align: center;
}

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: #999999;
  padding: 10px;
  grid-gap: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item one">1</div>
  <div class="grid-item two">2</div>
  <div class="grid-item three">3</div>
  <div class="grid-item four">4</div>
  <div class="grid-item five">5</div>
  <div class="grid-item six">6</div>
</div>