Как эмулировать этот дизайн в CSS? (Сетка типа)

Question

Я разработал следующее, используя немного читов, полей и контуров.

Сайт работает по адресу http://davidafroivey.github.io/

Рабочий CSS

body { margin: auto; max-width: 736px }

span.imgs { display: block; font-size: 0px; margin: 2px }

img { outline: 2px solid white }

img.a { width: 36% }
img.b { width: 64% }

Полный исходный код доступен здесь http://github.com/davidafroivey/davidafroivey.github.io/blob/master/index.html

Как я могу достичь подобной эстетики без очертаний? Я хочу иметь возможность создавать тени, которые не работают с контурами, потому что контуры мешают тому, что за ними стоит.

Часто случается, что я добавляю отступы или поля к диапазону, и это нарушает дизайн сетки. Это лучшее, что я могу собрать прямо сейчас.

Спасибо!

Answer 1

.a,
.b {
  padding:10px;display:inline-block;
  box-sizing: border-box;float:left
}
.imgs a:nth-child(odd):after{clear:both;display:block;content:''}
.a {
  width:30%
}
.b {
  width:70%}
.a img,
.b img {
  width:100%;box-shadow: 0px 2px 1px black;
}

<span class="imgs">

           <a href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/1.jpg" class="a">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/1.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/1.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/1.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/2.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/2.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/2.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/2.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/3.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/3.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/3.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/3.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/4.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/4.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/4.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/4.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/5.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/5.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/5.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/5.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/6.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/6.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/6.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/6.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/7.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/7.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/7.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/7.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/8.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/8.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/8.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/8.jpg"></a>

</span>

Ты можешь использовать padding:1px;box-sizing:border-box (Удалить outline)