3 ms·
I recently built this grid generator. The original iteration used percent based margins to create the gutters. However, I decided that I preferred fixed width g
by isaacgc 13y ago
I recently built this grid generator. The original iteration used percent based margins to create the gutters. However, I decided that I preferred fixed width gutters. Originally I used padding to set the gutter size. However, if the grid is to extend to the edge of its container, the first column element needs padding:0. This caused it to be slightly larger than the other columns as box-sizing needed to be set to border-box. So I opted to build the gutters using an invisible border-left to create the gutters. Then the grid container gets a negative left margin equal to the gutter size allowing the first and last columns to be flush with the edge of the container while remaining equally sized. This seems to have solved all my problems, however the system needs some cross-browser testing. Any feedback and bug reports will be very helpful for refining the code.