html - tamaño - ¿Cómo reproducir este efecto de diseño con css?

input css style

Question

Si no se crea una tabla de 7 columnas / 3 filas con una imagen de 1 píxel que se pueda expandir para simular las líneas, ¿cómo se puede reproducir este diseño usando HTML y CSS sin una tabla o una imagen para los "divisores"?

Lo que realmente me gusta es cómo las líneas no se cruzan.

<!-- layout reproduced -->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
<TR ALIGN="center">
<TD CLASS="boldedcolor4text">the first</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the second</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the third</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the fourth</TD>
</TR>
<TR ALIGN="center">
<TD COLSPAN="7"><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="520" HEIGHT="1"></TD>
</TR>
<TR ALIGN="center">
<TD><A CLASS="image" HREF="><IMG SRC="1.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="2.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="3.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="4.jpg" ALT="" BORDER="0"></A></TD>
</TR>
</TABLE>

Answer 1

Sin dependencias para mi solución. Creé un contenedor .container y luego cuatro elementos flexibles. La dirección predeterminada para flexbox es row , que es lo que queremos para el diseño externo, pero no para el contenido de cada elemento en la fila. Para ajustar esto, cambié la flex-direction de flex-direction de los elementos .item ( .item ) a la column ya que, en su ejemplo, las imágenes se apilan debajo de los anclajes.

Para el borde sin interrupción entre los anclajes y las imágenes, tomé un atajo y moví los estilos a una pseudoclase. Observe la position: relative; en .item . Esto se hizo para crear un contenedor seguro en el que mantener las fronteras de pseudo clase absolutamente posicionadas.

.container, .item {
display: flex;
}
.item {
flex-direction: column;
position: relative;
}
.item:before {
content: '''';
border-top: 1px solid;
position: absolute;
width: 100%;
top: 2em;
}
.item:first-child:before {
left: 1.5em;
}
.item:last-child:before {
left: -1.5em;
}
.item:last-child .link,
.item:last-child .img {
border-right: none;
}
.link,
.img {
border-right: 1px solid;
}
.link {
text-align: center;
}
.img {
margin-top: 2em;
padding: 0.5em 1em 0.5em;
}

<div class="container">
<div class="item">
<a class="link" href="">link 1</a>
<img class="img" src="http://placehold.it/100x130" alt="" />
</div>
<div class="item">
<a class="link" href="">link 2</a>
<img class="img" src="http://placehold.it/100x130" alt="" />
</div>
<div class="item">
<a class="link" href="">link 3</a>
<img class="img" src="http://placehold.it/100x130" alt="" />
</div>
<div class="item">
<a class="link" href="">link 4</a>
<img class="img" src="http://placehold.it/100x130" alt="" />
</div>
</div>

Fiddle: https://jsfiddle.net/1sbx2h5e/

Answer 2

Podrías intentarlo como: https://jsfiddle.net/wh48rjvt/

SCSS:

$border: 1px solid grey;
.table-row {
border-bottom: $border;
&:last-child {
border-bottom: 0;
}
.table-box {
border-right: $border;
margin: 0.75rem 0;
&:last-child {
border-right: 0;
}
}
}

esto hace que el siguiente CSS:

.table-row {
border-bottom: 1px solid grey;
}
.table-row:last-child {
border-bottom: 0;
}
.table-row .table-box {
border-right: 1px solid grey;
margin: 0.75rem 0;
}
.table-row .table-box:last-child {
border-right: 0;
}

HTML:

<div class="container">
<div class="table-row row">
<div class="table-box col-xs-3">1</div>
<div class="table-box col-xs-3">2</div>
<div class="table-box col-xs-3">3</div>
<div class="table-box col-xs-3">4</div>
</div>
<div class="table-row row">
<div class="table-box col-xs-3">5</div>
<div class="table-box col-xs-3">6</div>
<div class="table-box col-xs-3">7</div>
<div class="table-box col-xs-3">8</div>
</div>
...
</div>

Y usé Bootstrap para la grilla.