I have currently started messing around with the new Neat 2.0 framework. Previously in 1.8 when creating the grid the outer-container() mixin accepted an actual number for the size of your grid. However now with using Sass mapping the grid-container() mixin only accepts a sass map with the following attributes.
$my-custom-grid: (
columns: 12,
gutter: 20px,
media: 1200px,
color: rgba(#00d4ff, 0.25),
direction: ltr,
);
From what it appears, this just makes the grid the full screen width by default. How do I make a grid that is only 960px wide but still collapses when you start to shrink the browser size?
I feel like now I'll constantly be shifting elements so that they're not on the edge of the browser. I'm sure there's a way around this but just setting the width of the element where I call grid-container() doesn't work.
Any thoughts?
CSS max-width is the answer! It wont set the width of the container but rather keep the container from going past the given value. That way the width: calc() will still work as intended.