Skip to main content
higgsyd
higgsyd
Inspiring
May 20, 2018
Answered

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

  • May 20, 2018
  • 1 reply
  • 1032 views

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 has been closed for replies.
Correct answer osgood_

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?

1 reply

O
osgood_Correct answer
Legend
May 20, 2018

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?

higgsyd
higgsydAuthor
Inspiring
May 20, 2018

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

O
osgood_
Legend
May 20, 2018

At this stage l would use flexbox instead of grid.

.grid {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.grid div {

width: 48%;

}

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