Comments on: How to Create a 12 Column Grid System with Sass https://www.inspirationalpixels.com/grid-system-with-sass/ Web design tutorials, snippets and freebies Tue, 13 Jul 2021 16:46:12 +0000 hourly 1 https://wordpress.org/?v=6.8.3 By: Prayag https://www.inspirationalpixels.com/grid-system-with-sass/#comment-6617 Fri, 28 Jun 2019 10:25:16 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-6617 I was having some problems while calculating the width of each column. I am making a 12 column grid with each column having a margin-right of 1%. Now, I am not able to calculate the width of each column. Please help me. Thanks.

]]> By: Romullo https://www.inspirationalpixels.com/grid-system-with-sass/#comment-5764 Mon, 29 Apr 2019 17:27:01 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-5764 Simple and objective this tutorial .. and is being useful for min in 2019 ..tnks

]]> By: nikesh https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1148 Sat, 16 Sep 2017 12:40:36 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1148 Your tutorials is nice but I have analysed 2.4 calculation is 12 by 5 then it comes right value for .col-5.

Problem
// That 2.4 value simply comes by dividing 12 by 7
.col-5 { width:(100% / 2.4) – ($grid-spacing * 7 / 12); }

Correction
// That 2.4 value simply comes by dividing 12 by 5
.col-5 { width:(100% / 2.4) – ($grid-spacing * 7 / 12); }

]]> By: Bridger https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1147 Mon, 08 May 2017 13:56:50 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1147 In reply to Bridger.

Welp, I just changed the base styling in the “& + &” to margin-top: 0; and it worked.
I tried that earlier but it moved the column to the right hand side of the page, can’t reproduce that now so I’ll chalk it up to user error!

]]> By: Bridger https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1146 Mon, 08 May 2017 13:54:38 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1146 I’m using your grid system for a project I’m working on.
I have a top/nav bar at the top, using a row.
Then I created another row, which will contain my sidebar(col-2) and my main content(col-10).

How can I get rid of the top margin on the 2nd row?
https://github.com/reifnotreef/Web-App-Dashboard

]]> By: Jaymes Young-Liebgott https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1145 Mon, 03 Apr 2017 23:55:21 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1145 Thank you, this was a good starting point for me to make a Flexbox grid system using Sass. I took it to the next level and added breakpoints. I also used Sass maps and functions and managed to keep my code under 100 lines. I’ll added to the Laboratory section on my site in a couple of days. Thanks again for a nice starting point.

]]> By: Basu https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1144 Fri, 24 Feb 2017 09:03:52 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1144 nice work !! help me to understand grid much better complete the remaining part and i would love to follow it.

]]> By: Ashish Bhutani https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1141 Wed, 16 Mar 2016 07:11:11 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1141 Thank You For Such A Nice Tutorial!

]]> By: Barry https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1140 Sun, 24 May 2015 18:42:02 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1140 In reply to Andrés.

I’m not sure I understand 100% but you’re trying to add two more columns to the col-6 row? If this is what you’re trying to do, I would suggest using col-8 instead of col-6 so you can have 8 elements in the row.

]]> By: Andrés https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1139 Thu, 14 May 2015 08:48:53 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1139 In reply to Andrés.

Hello @@SebKay

Sorry For bother you. Any update for this topic?

Thank you so much!!

]]> By: Andrés https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1138 Fri, 01 May 2015 17:05:45 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1138 @SebKay If I want 2 columns more inside of a ‘col-6’ for example. How can I do to have the same grid-spacing? I tried but the grid-spacing between this two columns is 1.5%. One way to solve this is adding an extra class to this two columns.. but I don’t know if the best way to do it.

Thank you so much!!

]]> By: Andrés https://www.inspirationalpixels.com/grid-system-with-sass/#comment-1137 Fri, 01 May 2015 13:38:40 +0000 http://staging.inspirationalpixels.com/?p=2996#comment-1137 @SeKay Thank you so much for your tutorial! 😀

I’m looking forward for the responsive tutorial!

]]>