Various Ways to Make Fancy Columns and Things

AKA, Layout Grids


Flexbox is mostly done in css. It is a one-dimensional thing, so you can do columns OR you can do rows, but not together. If you need to manipulate them both, use CSS grids.

Three boxes arranged in a row

Box One

display: flex | inline-flex;

flex-direction: row | column;

flex-wrap: wrap | nowrap | wrapreverse;

flex-basis: <length>;

Box Two

justify-content: flex-start | flex-end | center

align-self: flex-start | flex-end | center

align-items: flex-start | flex-end | center

align-content: flex-start | flex-end | center

Box Three

flex-grow: <number>;

flex-shrink: <number>;

flex: <integer>;

order: <integer>;

This section has a media query

Three boxes with some space

Box Four

Box aligned to end

Box Five

Box aligned to start with align-self. This section has a media query

Box Six

This box is aligned to the end, which is the default for the container holding boxes four through six. It's just bigger than the others in the div so it forces them all to adjust to itself.

A buncha responsive boxes WITHOUT MEDIA QUERIES!

Box Seven

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Box Eight

Box Nine

Box Ten

Box Eleven

Box Twelve

note: comment out the css on the div tag to get a view of a less obvious layout

CSS Grids

CSS grids handle 2 dimensional flexibility, so both columns and rows at the same time. Use grid-template-columns and grid-template-rows to set the number of columns and rows. You can use percentages, pixels, or fractions. This grid has grid-template-colums: 70% 30%. The lower grid has a grid-template-columns of 1fr 2fr 1fr, giving four columns, but the middle one is twice the size of the others.

All gridding is handled within the css, based upon what goes on in the class holding it. In this case, that class is "wrapper".

This grid's div ("wrapper") has display:grid; grid-template-colums: 70% 30%; and grid-gap:1em; as attributes.

Note that it's actually pretty good with the respnsiveness.
CSS grids can be set up using x-y axis lines. This box goes from horizontal line one (the beginning) to horizontal line three, and the vertical line one (the top) to vertical line 3. Write this as grid-column:1/3; grid-row:1/3;.
This box starts at horizontal line 3 and goes from vertical line 1 to 3.
This box goes from horizontal line 2 to 4, and vertical 3.
This box goes from horizontal line one (the beginning) and the vertical line 2 to 4. Note that you can stack the boxes on top of each other.

Bootstrap Grids

This requires you to add Bootstrap and jQuery in the head section. You need to put the whole thing in a div with class container. Bootstrap divides the page into 12 columns. You then assign your boxes the appropriate number of columns. Sometimes margins interfer. The advantage of using bootstrap colums and rows is that it is automatically responsive.

5 column of grid

Some of the griddiness is taken up with the margins. Just go with it.

4 column of grid

3 columns of grid

Note that the grid system isn't working properly. Lorem ipsum dolor, sit amet consectetur adipisicing elit.

6 columns of grid

Note the grey color over the background due to adding the well class to each box.