Highlighted

My grid is all squeezed up and way off to the right

Participant ,
May 20, 2018

Copy link to clipboard

Copied

http://v37.ancestry.higgsy.co.uk/content_rockliffe.php  This page has a table with three columns of names.  I have attempted to take the first three rows and put them into a grid.  Can any of you super-clever people tell me why the grid is sitting at the far right of the page all squeezed up?  I have run it through html checker and there are only three errors and they are because I am using width for the columns.  Obviously if I can implement the grid, such errors will be no more as I will dispense with the table, many thanks, David

Try adding

clear: both; to your .grid css selector:

.grid {

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;

clear: both;
}

or you could add:

overlflow: hidden;

to your #navbar css selector.

You do realise 'grid' is no where near stable to use at the moment without using fallbacks?

Views

747

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

My grid is all squeezed up and way off to the right

Participant ,
May 20, 2018

Copy link to clipboard

Copied

http://v37.ancestry.higgsy.co.uk/content_rockliffe.php  This page has a table with three columns of names.  I have attempted to take the first three rows and put them into a grid.  Can any of you super-clever people tell me why the grid is sitting at the far right of the page all squeezed up?  I have run it through html checker and there are only three errors and they are because I am using width for the columns.  Obviously if I can implement the grid, such errors will be no more as I will dispense with the table, many thanks, David

Try adding

clear: both; to your .grid css selector:

.grid {

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;

clear: both;
}

or you could add:

overlflow: hidden;

to your #navbar css selector.

You do realise 'grid' is no where near stable to use at the moment without using fallbacks?

Views

748

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 20, 2018 0
LEGEND ,
May 20, 2018

Copy link to clipboard

Copied

Try adding

clear: both; to your .grid css selector:

.grid {

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;

clear: both;
}

or you could add:

overlflow: hidden;

to your #navbar css selector.

You do realise 'grid' is no where near stable to use at the moment without using fallbacks?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2018 0
Participant ,
May 20, 2018

Copy link to clipboard

Copied

many thanks osgood, it now works, just need to get the spacing right.  Then I suppose I'll have to go and investigate 'fallbacks'

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2018 0
LEGEND ,
May 20, 2018

Copy link to clipboard

Copied

At this stage l would use flexbox instead of grid.

.grid {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.grid div {

width: 48%;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2018 0
ALsp LATEST
Mentor ,
May 20, 2018

Copy link to clipboard

Copied

To add to Osgood's good advice, you might want to explore using flex-basis in lieu of width. But read up on it first. It's powerful, but a different animal to get your head around. If you are a pro designer an have a budget, you might also consider our Harmony grid too, which gives you a visual UI in Dreamweaver with which to build flex grids as if you were playing with Legos... and it handles fallback to float programmatically for the browsers that need it.

PVIIHarmony Flexbox for Dreamweaver

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2018 1