Neat 2.0 - Setting the grid size from full-width to specific px

Question

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?

have you tried using `max-width: 960px;` in the class you're putting `grid-container()` in? — Tomas, May 24 '17 at 04:39
Haha yes, I did indeed and that solved the problem. I wasn't certain if that would mess with the grid system but since all the column widths use `calc()` now it hasn't caused any issues. Thank you for replying! @tec4 — Nathan Hulsey, May 24 '17 at 16:41

score 2 · Accepted Answer · answered May 24 '17 at 17:35

2

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.

answered May 24 '17 at 17:35

Tomas

1,392
2
9
13

1

I can confirm that this is indeed the answer! Haha, thank you! – Nathan Hulsey May 29 '17 at 19:34
You can accept this answer so other users can know right away what the answer is. @NathanHulsey – Tomas Jun 25 '17 at 23:59

Neat 2.0 - Setting the grid size from full-width to specific px

1 Answers1