Skip to main content
higgsyd
higgsyd
Inspiring
May 20, 2018 2:04 PM UTC
Answered

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

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

This topic is closed to new replies. Start a new post to keep the conversation going.
osgood_Correct answer
Legend
May 20, 2018 3:16 PM UTC

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?

View reply

4 replies

osgood_Correct answer
Legend
May 20, 2018 3:16 PM UTC

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?

Translate
higgsyd
higgsydAuthor
Inspiring
May 20, 2018 4:10 PM UTC

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

Translate
osgood_
Legend
May 20, 2018 4:19 PM UTC

At this stage l would use flexbox instead of grid.

.grid {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.grid div {

width: 48%;

}

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices