Мой Справочник | CSS3 | Таблицы на CSS3 | Адаптивная сетка на таблице

"Holy Grail" (сетка называется "Святой Грааль")

HEADER

Excepturi odit suscipit veniam? Natus et reprehenderit magni expedita, dicta, animi mollitia molestiae sed quae vitae asperiores accusamus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quasi in repellendus, blanditiis iste quod asperiores facere quam. Nostrum fuga architecto saepe facere eos, odit sequi rerum ad nihil error assumenda fugiat molestiae, iste obcaecati modi aperiam laboriosam! Odio voluptatem repellendus odit dignissimos, quo, vero cumque voluptatum velit minus iure ipsum quod corporis obcaecati saepe perferendis facere itaque tenetur omnis.

Repellendus vel excepturi nesciunt delectus quibusdam, rem aspernatur, voluptates vero molestiae cum veritatis ipsum.

HTML:

<div class="table-layout">
    <header>HEADER</header>
    <main>
        <div class="left-column">Exce...</div>
        <div class="center-column">Lorem</div>
        <div class="right-column">Rep...</div>
    </main>
    <footer>FOOTER</footer>
</div>

CSS:

1.Задаём контейнеру табличный вид
и 100%-ную ширину и высоту
.table-layout {
    display: table;
    width: 100%;
    height: 100%;
}
2.Хэдер и футер - строки таблицы
с высотой 1 пиксель - прижмутся к краям контейнера
.table-layout header {
    display: table-row;
    height: 1px;
    background: rgba(186, 252, 8, 0.8);
    border: 1px solid black;
}
.table-layout footer {
    display: table-row;
    height: 1px;
    background: rgba(81, 104, 230, 0.8);
    border: 1px solid black;
}
3.Контентную часть аналогично делаем таблицей
со 100%-ной шириной и высотой
.table-layout main {
    display: table;
    width: 100%;
    height: 100%;
    border-collapse: separate;
    border-spacing: 10px;
}
4.Колонки контента делаем ячейками таблицы -
равномерно распределяться по ширине контейнера
main .left-column,
main .center-column,
main .right-column {
    display: table-cell;
    border: 1px solid black;
    padding: 10px;
}
5.Задаём крайним колонкам фиксированную ширину,
при этом центральная колонка будет АДАПТИВНОЙ
main .left-column,
main .right-column {
    width: 100px;
}