Убрать отступы, чтобы картинки были одна за другой, и в таком расположении

Question

body,
h1,
h2,
h3,
h4,
p,
a {
  margin: 0;
  font-size: 100%;
  font-weight: normal;
}

body {
  font-family: 'Roboto', serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.galery img {
  display: inline;
}

.but-g {
  margin: auto;
  position: relative;
  top: 60px;
  width: 150px;
  height: 30px;
  font-family: 'Roboto Regular', sans-serif;
  font-size: 16px;
  border: 1px solid rgba(1, 1, 1, 0.89);
  border-radius: 20px;
  padding: 15px 64px;
  background-color: rgba(1, 1, 1, 0.89);
}

.but-g a {
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="http://allfont.ru/allfont.css?fonts=arial-narrow-bold" rel="stylesheet" type="text/css" />
  <title>Свила</title>
</head>

<body>
  <main>
    <div class="galery">

      <img src="https://i8.wampi.ru/2020/02/06/BEZ-ZAGOLOVKA4.png" alt="Без заголовка4" border="0">
      <img src="https://i0.wampi.ru/2020/02/06/g-2.png" alt="g 2" border="0">
      <img src="https://i9.wampi.ru/2020/02/06/g-3.png" alt="g 3" border="0">
     <img src="https://i9.wampi.ru/2020/02/06/SLOI-12.png" alt="Слой 12" border="0">
      <img src="https://i0.wampi.ru/2020/02/06/g-5.png" alt="g 5" border="0">
      <img src="https://i0.wampi.ru/2020/02/06/g-6.png" alt="g 6" border="0">

      <div class="but-g"><a href="">Посмотреть еще</a></div>
    </div>
  </main>


</body>

</html>

, подскажите, пожалуйста, как убрать отступы, чтобы картинки смотрелись как на макете. Пусть зазоры будут справа и слева, но между картинками не было совсем.

Answer 1

Просто используйте flexbox.

body,
h1,
h2,
h3,
h4,
p,
a {
  margin: 0;
  font-size: 100%;
  font-weight: normal;
}

body {
  font-family: 'Roboto', serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.galery {
  padding-left: 15%;
  display: flex;
  flex-wrap: wrap;
}

.galery img {
  flex-basis: 33.33333333%;
}

.but-g {
  margin: auto;
  position: relative;
  top: 60px;
  width: 150px;
  height: 30px;
  font-family: 'Roboto Regular', sans-serif;
  font-size: 16px;
  border: 1px solid rgba(1, 1, 1, 0.89);
  border-radius: 20px;
  padding: 15px 64px;
  background-color: rgba(1, 1, 1, 0.89);
}

.but-g a {
  color: #fff;
}

<main>
  <div class="galery">

    <img src="https://i8.wampi.ru/2020/02/06/BEZ-ZAGOLOVKA4.png" alt="Без заголовка4" border="0">
    <img src="https://i0.wampi.ru/2020/02/06/g-2.png" alt="g 2" border="0">
    <img src="https://i9.wampi.ru/2020/02/06/g-3.png" alt="g 3" border="0">
    <img src="https://i9.wampi.ru/2020/02/06/SLOI-12.png" alt="Слой 12" border="0">
    <img src="https://i0.wampi.ru/2020/02/06/g-5.png" alt="g 5" border="0">
    <img src="https://i0.wampi.ru/2020/02/06/g-6.png" alt="g 6" border="0">

    <div class="but-g"><a href="">Посмотреть еще</a></div>
  </div>
</main>

Answer 2

Пример

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.gallery{
  display: flex;
  flex-wrap: wrap;
 }
 .gallery__col{
   width: 33.333%;
   max-width: 33.333%;
 }
 .gallery__pict{
   padding-bottom: 50%;
   height: 0;
   overflow: hidden;
   position: relative;
 }
 
 .gallery__img{
   position: absolute; top: 0; left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

<div class="gallery">
    <div class="gallery__col">
      <div class="gallery__pict">
        <img src="https://placeimg.com/640/480/any" alt="" class="gallery__img">
      </div>
    </div>
    <div class="gallery__col">
      <div class="gallery__pict">
        <img src="https://placeimg.com/640/480/nature" alt="" class="gallery__img">
      </div>
    </div>
    <div class="gallery__col">
      <div class="gallery__pict">
        <img src="https://placeimg.com/640/480/any" alt="" class="gallery__img">
      </div>
    </div>
    <div class="gallery__col">
      <div class="gallery__pict">
        <img src="https://placeimg.com/640/480/nature" alt="" class="gallery__img">
      </div>
    </div>
    <div class="gallery__col">
      <div class="gallery__pict">
        <img src="https://placeimg.com/640/480/any" alt="" class="gallery__img">
      </div>
    </div>
    <div class="gallery__col">
      <div class="gallery__pict">
        <img src="https://placeimg.com/640/480/nature" alt="" class="gallery__img">
      </div>
    </div>
</div>

БЛОГ НА HUSL

Убрать отступы, чтобы картинки были одна за другой, и в таком расположении

Ответы (2 шт):