Как можно сделать что-то подобное с сеткой 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>