Wie man dieses Design in CSS emuliert? (gitterartig)

Question

Ich entwarf das folgende mit ein bisschen ein Betrüger, Ränder und Umrisse.

Webseite ist bei http://davidafroivey.github.io

Arbeits CSS ist

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% } 

vollständige Quellcode verfügbar ist hier http://github.com/davidafroivey/davidafroivey.github.io/blob/master/index.html

Wie kann ich ohne Konturen eine ähnliche Ästhetik erreichen? Ich möchte Schatten erstellen können, die nicht mit Umrissen funktionieren, da Umrisse das, was sich hinter ihnen befindet, behindern.

Häufig passiert es, dass ich einem Span eine Auffüllung oder Ränder hinzufüge, die das Rasterdesign unterbrechen. Das ist das Beste, was ich jetzt aufbringen kann.

Danke!

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>

Sie können padding:1px;box-sizing:border-box verwenden (entfernen outline)