thisisdallas / simple-grid Goto Github PK

In your readme it says, "The first column of content in your grid will always be floated left. If you would like to float a column to the right, all you have to do is add the class push-right." I can't find any reference to a push-right class in your code.

Feature wish: Add a bower.json! :-)

Hi!

I found a typo in your demo index.html file.
No big deal, but it helps beginners:
you link to simpleGrid.css on line 8, but the file is named simplegrid.css - no caps.

best,
rssi

I'm use rawgit to get the libs of github to implement im my projects.

I would be so much happy if have a minified version of this lib.

Thanks guys :)

I'm having a problem with some simple nested grids, please see

https://codepen.io/wyzix33/pen/Jjoydqg

one div is shorter because of a 20px right margin and the first div is a bit to the right.

Thanks

Hello
*, decrease font and search module

any suggestions?

The grid isn't pixel perfect.

It looks really noticeable if you create a test grid and assign colored backgrounds to all the 'content' and 'col' divs.

It can be fixed if values like 33.33% are changed to 33.33333333333333%

Hi

Your grid solution is nice for desktop and mobile.

But I am facing problem with nested grid. Can you please check and suggested what I can do better.

not loading simplegrid.css

Is there a maintained fork of this project?

Perhaps I missed it, but there is nothing pointing out the fact that this uses box-sizing, which some browsers don't support.

Maybe there should be a section listing the browser versions supporting this?

CanIUse.com table

Hi,

I need to reproduce 1-4, 1-4, 2-4 layout but the last column break going bellow others... My html code:

            <div class="grid grid-pad">
                <div class="col-1-4">
                    <div class="content">
                        <h3>
                            col-1-4
                        </h3>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    </div>
                </div>
                <div class="col-1-4">
                    <div class="content">
                        <h3>
                            col-1-4
                        </h3>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    </div>
                </div>

                <div class="col-2-4">
                    <div class="content">
                        <h3>
                            col-2-4
                        </h3>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    </div>
                </div>
            </div>

What is the best way to do this?
Thanks.

Assume a situation that a dropdown menu in a .grid container, the overflow part be hidden by this property.

Hi,
As this repo is not maintained anymore, I would like to propose myself as the new maintainer.

Cheers!

The padding should be removed, so the last column edge is equal with the .grid container.

LOGO needs to be centered on Mobile view taking entire row
And left floated when in large display with rest of columns.
But I am unable to do so using bare simplegrid classes..

       <div class="grid">                   
                <div class="col-3-12 mobile-col-1-1">
                        Logo
                </div>
                <div class="col-9-12 mobile-col-1-1">
                    <ul>
                        <li class="push-right mobile-col-1-2">
                            RIGHT HEADER 1
                        </li>
                        <li class="push-right mobile-col-1-2">
                            RIGHT HEADER 2
                        </li>
                    </ul>
                </div>                                      
       </div>

you know the drill

Your bower.json is conflicted with another repository.

Typing bower install simple-grid installs https://github.com/ricogallo/simple-grid.

Can you please change the bower package name?

Cheers,
J

Simple-Grid set box-sizing of * as border-box. But I don't need it in other place. If I add it to my site, it will force the whole site change the look and may cause unexpected problem.

I suggest only to apply box-sizing on those elements that are related to Simple Grid.

Not really an issue - but i noticed when viewing the demo/gh page my safari - the CPU usage was about 60-80% when i had that page opened? Closing it made it go right back down again? Odd.

Hi! I want to know if it's possible to change the max-width: 1140px; of the .grid?

I want to make a large grid, with very small margin at the right and left of the window.

Thank you!

Hi there,

I just had a really weird scenario. I had 3 columns set up (col-1-3). I had the <form> tag at the start of the first column and the </form> at the end of the third one.

However browsers decided that the </form> tag should be placed at the end of the first column. I fixed it by defining the form before the 3 columns.

But I'm not sure if this is a Simple Grid issue or just a random HTML5 niggle.

Thanks!

HI Guys,
I was looking for a BS4/5 alternative came across S.G, I was looking at the main page and code examples, but for the life of me I can't figure out the "system/nomenclature" col-x-y. What does the 2nd number mean ?? I know with BS4/5 there is one number like col-12 or col-md-2 ?

I would suggest to START with the "system/concept/nomenclature" as to WHAT the two numbers mean right at the top of the homepage/examples.

Also it could just be that I am dumb :)

anyone tried to emulate the grid using Opera Mobile emulator?
So far I found percentage grid rendering in mobile browser in-consistent.

Any reason why not? Would be pretty simple to switch around

Hi,

On mobile all grids on are inline:

Mobile:

Desktop:

Could you suggestion something to keep the two columns with the same col-10-12 / col-2-12 ratio on mobile? I'd like to have this for list pricing.

Thanks for this great work. Cheers!
Pascal

Hi. Sorry for being such a dummy but I'm new to the CSS grid system (and really, to responsive web design per se) and I chose this project because I liked it's simplicity and versatility. However, I seem to have run into an issue: the website I'm currently working on looks great on desktops and even when I resized the browser window. But when I checked it on my mobile phone, it looked like a small version of the desktop site-- I mean, the columns aren't showing one below the other, but rather side by side, like in a desktop. Is there something I could have messed up that is causing this?
I apologize for the inconvenience and appreciate any help that can be provided.
(In case you'd like to see the website is at www.viva-fit.be/newsite)