Grid vs. Flexbox

"Paper Cut" Problems

When the media queries of the custom css (or our new library) and the Bootstrap do not align exactly with the same breakpionts (to the pixel), this can result in some undesireable views. It is very rare, but it can sting like a paper cut!

Bootstrap 3.4.1

We are building on top of the current Bootstrap 3.4.1 resoureces.

• Container Systems
  • Rows
    • Columns

(and in that order)

Amendments we hope to incorporate:

• Flexbox
• Grid

Process

Is this a good process?

When we need a container, use the bootstrap .container or .container-fluid, and always follow it immediately by a .row, and then a .col. When you exhaust the .row, close everything except for the .container, and start back w a new .row, and then a .col.

Never put a .container inside another .container!

Right?! (trying to image an edge case)

Flexbox is great! Let's find the use cases for it!

When you have an odd number of items to display, say 3, Grid will probably never look great unless you keep it to 3 wide on all views.

XL Screens

Large screens break things!

Bootstrap solves this really well on our main .container

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

Note: the width is set to 1170px with a min-width of 1200px, this works perfectly due to the padding-left adding 15px and the padding-right adding another 15px.

1170 + 15 +15 = 1200

 ._grid-4 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(calc(25% - 1rem), 1fr));
}

For starters?!

Git Repository: grid-works

Live Demo: grid-works Demo

Question

Next Steps?!

Share your feedback