Comment émuler ce design en CSS? (semblable à une grille)

Question

J'ai conçu ce qui suit en utilisant un peu de triche, des marges et des contours.

site est en direct à http://davidafroivey.github.io

de travail CSS est

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

code source est disponible ici http://github.com/davidafroivey/davidafroivey.github.io/blob/master/index.html

Comment puis-je obtenir une esthétique similaire sans contours? Je veux être capable de construire dans les ombres qui ne fonctionnent pas avec les contours parce que les contours obstruent ce qui est derrière eux.

Ce qui arrive souvent, c'est d'ajouter des marges ou des marges à une travée et ça casse la conception de la grille. C'est le meilleur que je puisse rassembler en ce moment.

Merci!

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>

Vous pouvez utiliser padding:1px;box-sizing:border-box (enlever outline)