Question

I’ve been struggling for awhile trying to make a 3×3 grid layout in which the center div has a fixed width & height, and the rest grow to fit the window size as needed, but I can never get the non-center divs to behave. I’ve found some solutions that worked for a two-column layout, but I couldn’t figure out how to adapt them to three. Here’s what I have so far: http://jsfiddle.net/WGaVH/

New to CSS here, so any help is very much appreciated. Thanks!

Answer 1

Display table makes this easy:

<style type="text/css">
    html, body {
        padding: 0;
        margin: 0;
    }
    .grid3x3 {
        display:table;
        height:100%;
        width:100%;
    }
    .grid3x3 > div {
        display:table-row;
        width:100%;
    }
    .grid3x3 > div:nth-child(2) {
        height: 100px;
    }
    .grid3x3 > div > div {
        display:table-cell;
    }
    .grid3x3 > div > div:nth-child(2) {
        width:100px;
    }

    div {
        outline: 1px solid orange;
    }


</style>
<div class="grid3x3">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>