three-column css grid

In diesem CSS Beispiel erstelle ich ein responsive 3er Raster in der Flat Screen Optik für eine mobile HTML App. Ein Feld soll hierbei aber 2×2 Zellen groß sein. Die Zellen werden mit einer 1px breiten Linie getrennt.

Nun erstmal das HTML Gerüst. Den Anfang macht ein Raster mit 3×3 Feldern. Danach folgt rechts ein großes Feld mit 2×2 Einheiten. Daneben 1×2 Felder.

<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>
<div class="tab">6</div>
<div class="tab">7</div>
<div class="tab">8</div>
<div class="tab">9</div>
 
<div class="tab big">big 2x2</div>
 
<div class="tab">x</div>
<div class="tab">y</div>

Nun zum CSS. Die Breite wird prozentual ausgerechnet. (http://caniuse.com/#feat=calc) Die Höhe mit der Viewport height VH (http://caniuse.com/#feat=viewport-units). Um ganz sicher zu sein, könnte man die Screen Size mit JavaScript ermitteln und daraus die Zellen-Höhen berechnen. (Der optische Aufbau meiner „Noten Erlernen App“ wird mit JS berechnet) In diesem Beispiel bleib ich nur mal beim CSS. Die Linien kann man auf 2 Arten darstellen. Entweder mit Border oder mit Shadow. Der Schatten ist hierbei innerhalb der Fläche – nur 1px breit und hat auch keinen Verlauf.

Hier das Beispiel mit der „Schatten“-Linie:

body {
   margin: 0;
}
.tab {
   display: flex;
   align-items: center;
   justify-content: center;
   float: left;           
   box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1); /* shadow inset: right, bottom */
   width: calc(100% / 3);
   height: 20vh;
}
.tab:nth-child(3n) {
   box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,1); /* shadow inset: bottom */
}
.tab:last-child {
   box-shadow: inset -1px 0px 0px 0px rgba(0,0,0,1); /* shadow inset: right */
   width: calc(100% / 3);
   background-color: lightgray;
}
.big {
   width: calc(100% * (2/3));
   background: lightgreen;
   height: 40vh;
   float: right;
   box-shadow: none;
}

Und nun die Lösung mittels border:

body {
   margin: 0;
}
.tab {
   display: flex;
   align-items: center;
   justify-content: center;
   float: left;           
   border-bottom: 1px solid black;
   border-right: 1px solid black; 
   width: calc((100% / 3) - 1px);
   height: 20vh;
}
.tab:nth-child(3n) {
   border-right: none;
   width: calc(100% / 3); /* last (3rd) grid 1px longer */
}
.tab:nth-child(-n + 3) {
   border-top: none; /* first row */
}
.tab:last-child {
   border-right: 1px solid black;
   border-bottom: none;
   width: calc((100% / 3) - 1px);
   background-color: lightgray;
}
.big {
   width: calc(100% * (2/3));
   background: lightgray;
   height: calc(40vh + 1px);  /* +1 px (tab border) */
   float: right;
   border: none;
}

Wie man sieht, muss man mit den 1px border mehr rechnen – da der Pixel von der Breite oder Höhe abgezogen werden muss. Das spart man sich beim Schatten.

Digiboarder

Gregor's Page

three-column css grid

Schreibe einen Kommentar Antworten abbrechen