Od zarania dziejów programiści mierzyli się z problemem wyrównywania wysokości kolumn. Jedni stosowali prastare metody związane ze znacznikiem TABLE, inni po wynalezieniu koła zaczęli stosować JavaScript.
My jednak dziś przyspieszymy ewolucję i poznamy: Pseudotabelusa, Flexiteka oraz Homo-Gridiensa.
Zróbmy więc pierwszy krok. Wykorzystamy właściwości tabeli, nie wykorzystując znaczników TABLE, TR i TD. Użyjemy właściwość display:table oraz display:table-cell.
<div id="container">
<div>1</div>
<div>2</div>
<div>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym,
pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków
na komputerach osobistych, jak Aldus PageMaker</div>
</div>
+
#container{
display:table;
}
#container>div{
display:table-cell;
border:1px solid #000;
}
Przeglądarka nie miała innego wyjścia jak wyrównać kolumny (komórki w tabeli muszą mieć równe wysokości). Z racji faktu, że czerpiemy z cech właśnie tabeli, można też ustawić właściwość border-collapse na collapse, a wtedy pozbędziemy się podwójnych ramek międy kolumnami 1 i 2 oraz 2 i 3. W przeciwnym razie trzeba kombinować z właściwościami border (border-width), włączając lub wyłączając wybrane ramki.
Duży krok naprzód to wyświetlanie flex:
#container{
display:flex;
}
#container>div{
border:1px solid #000;
}
Tu chyba mniej kodu niż w poprzednim przykładzie, a efekt ten sam. Niestety jeśli chodzi o border-collapse, to odpada. Pozostaje wspomniana kombinacja z ramkami.
I czasy dzisiejsze - grid. Przykład może trochę na wyrost, bo grid ma dużo większe możliwości, ale nikt nie powiedział, że nie można go wykorzystać również do takiego celu.
#container {
display: grid;
grid-template-columns:auto auto auto;
}
#container>div {
border: 1px solid #000;
}
Tu z racji zasady działania grid, określamy ile elementów chcemy traktować jako kolumny. Szerokość każdej z nich ustaliliśmy na auto (dopasowujące się do treści).
Gdybyś chciał osiągnąć również efekt równych szerokości, to w dwóch pierwszych przykładach wystarczy ustawić właściwość width elementów na: 33.333% lub calc(100% / 3). Każdy zajmie wtedy swoją tercję. W przypadku grid postępujemy trochę inaczej. Tu musielibyśmy ustawić grid-template-columns na: 33.333% 33.333% 33.333% lub na: 1fr 1fr 1fr. Pojawiła się tu pseudojednostka fraction (fr), po polsku część. 1fr nie oznacza jednak, że kolumna dostaje całą jedną wolną przestrzeń (całe 100%). Dostaje wolną przestrzeń rozdystrybuowaną pomiędzy inne elementy, w ilości pomnożonej przez 1. Czyli efekt będzie osiągnęty. Gdybyśmy określili tą wartość na: 2fr 1fr 1fr, to pierwsza kolumna dostałaby 50% szerokości, pozostałe dwie po 25%.
Jeśli osiągnąłeś już któryś z powyższych kroków kolumnowej ewolucji, to może to być powód do dumy.
Przydatne linki:
Właściwość display
Układ flex
Układ grid