Ich möchte das CSS- borderAttribut verwenden, um ein feines 1pxRaster zwischen spanElementen zu erstellen, so wie hier.
|
1 | 2
-----|-----
3 | 4
|
Das ist, was ich derzeit habe. Es funktioniert offensichtlich nicht ganz.
<html>
<head>
<style>
div {
width: 204px;
}
span {
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid #ccc;
border-left-width: 0;
border-top-width: 0;
}
</style>
</head>
<body>
<div><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>
</html>
Wenn der divauf gesetzt ist 306pxund die Elemente umfließen, sollte sich die Lösung dynamisch anpassen.
| |
1 | 2 | 3
-----|-----|-----
4 |
|
Vorzugsweise nur CSS oder reines Javascript. Ältere Browser wie IE7 können ignoriert werden.
Lösung des Problems
Ich habe mir diesen Ansatz ausgedacht, der meiner Meinung nach mit minimalem CSS und Hacks ziemlich gut funktioniert: https://codepen.io/eriklharper/pen/JMKMqa
.border {
background-color: gray;
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(auto, auto));
grid-gap: 1px;
}
.grid > div {
background-color: white;
padding: 10px;
} <div class="border">
<div class="grid">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</div>
Keine Kommentare:
Kommentar veröffentlichen