FlexGrid Example

Basic Grids

The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default.

1/2

1/3

1/4

1/5

                    
                        <div class="grid">
                            <div class="grid-cell"> 1/2 </div>
                            <div class="grid-cell"> 1/2 </div>
                        </div>

                        <div class="grid">
                            <div class="grid-cell"> 1/3 </div>
                            <div class="grid-cell"> 1/3 </div>
                            <div class="grid-cell"> 1/3 </div>
                        </div>

                        <div class="grid">
                            <div class="grid-cell"> 1/4 </div>
                            <div class="grid-cell"> 1/4 </div>
                            <div class="grid-cell"> 1/4 </div>
                            <div class="grid-cell"> 1/4 </div>
                        </div>

                        <div class="grid">
                            <div class="grid-cell"> 1/5 </div>
                            <div class="grid-cell"> 1/5 </div>
                            <div class="grid-cell"> 1/5 </div>
                            <div class="grid-cell"> 1/5 </div>
                            <div class="grid-cell"> 1/5 </div>
                        </div>