simple gridd

by Snj

HTML

<div class="tac-grid-container">
    <section class="tac-grid-index">
        <div class="tac-index">
            index
        </div>
    </section>
    <section class="tac-grid-sub">
        <div class="tac-sub">
            sub
        </div>
    </section>
    <section class="tac-grid-content">
        <div class="tac-content">
          content
        </div>
    </section>
</div>

CSS

body { margin: 0; height: 100vh; }

.tac-grid-container {
    display: inline-grid;
    grid-template-columns: .1fr .1fr 1.2fr;
    grid-template-areas:
        "tac-grid-index   tac-grid-sub    tac-grid-content";
    width: 100%;
    background: #026165;
}
section.tac-grid-index {
    grid-area: tac-grid-index;
    background: #bc9898;
}
section.tac-grid-sub {
    grid-area: tac-grid-sub;
    background: #8b79ae;
}
section.tac-grid-content {
    grid-area: tac-grid-content;
}