• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Why is the centre grid item so long?

Participant ,
Dec 08, 2020 Dec 08, 2020

Copy link to clipboard

Copied

Please see this page http://v58.ancestry.higgsy.co.uk/rockliffe_dave_junior.html  Could one of you fine people say why the centre grid item is extending below images either side of it?.  I thought the height of the grid items is determined by their content and in this case all three grid items have content that is short enough.  Many thanks

Views

298

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
community guidelines

correct answers 1 Correct answer

Community Expert , Dec 09, 2020 Dec 09, 2020

To highlight the fluid nature of text online, take a look at how it displays on my monitor, using my normal "much less than full screen" browser window...

 

text1.jpg


...and a second shot at the same browser width, with the text enlarged for those with, let's call it "less youthful" eyes...

text2.jpg


...make sure to change the size of your design or preview space from time to time so you know how things will react to smaller screens than what you're working in. A fair number of your viewers won't be browsing the

...

Votes

Translate

Translate
LEGEND ,
Dec 08, 2020 Dec 08, 2020

Copy link to clipboard

Copied

Not sure I understand?

 

The center content is longer that the content either side of it because it has more content in it. What was it you expected to happen?

 

Maybe you are refering to the large white gap between the blocks of text in the center column at large screen sizes? That is just the way you have the grid set up. To get rid of that gap you either have to set the grid up differently or just include the text starting...'The below photo is at his 80th birthday......plus the image in the same div that ends with the text....'The family once lived in'.........

 

Grid is quite complex - unless you know how to set it up you are best advised to stick with Flexbox at the moment. Your layout doesn't really require grid and you are NOT really taking advantage of grid the way you have it set up, you are just causing yourself more problems.

Votes

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
community guidelines
Community Expert ,
Dec 08, 2020 Dec 08, 2020

Copy link to clipboard

Copied

The text inside the center column is taller than the images in most screens (or when someone makes their text larger within the browser). It's not taller though, it's the same height as the side columns, it just happens to be the only one with a visible border, so it appears longer. 

Thankfully, the images aren't going to stretch in height to match the text or they would quickly becom comically distorted.

Votes

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
community guidelines
Participant ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

thanks your comments chaps, I will pursue your suggestions.  Though I agree the centre content looks longer than the two images either side I'm still unclear as to where is that content? and what is all that white space immediately following the Rawstorne Street text?  In the HTML the div ends immediately after the Rawstorne Street text. (I added that thin border just to outline the div for myself)

white gap.png

Votes

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
community guidelines
LEGEND ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

Grid is very different to what you are used to using. It requires you to span grid rows and columns. Think of your layout as a grid of 3 x 3 boxes.  When you place something on the grid, say a <div> you need to tell the <div> where you want it to start and where you want it to end.

 

For instance if you place a <div> at the top left-hand corner of the grid it starts on row 1 of the grid. You then need to tell it how many columns you require it to span and how many rows, otherwise you will end up with all kinds of unexpected white spaces/gaps between your <divs>, much as you are currently experiencing.

 

.myDivName {

grid-row: 1/3; /* The div will start at row 1 and span 3 rows. */

grid-col: 1/2; /* The div will start at column 1 and span across 1 column ending at column 2. */

}

 

Below is an example of your basic layout, using the grid correctly. Ive hightlighted, with a background color of yellow, the  content following the text Rawstone Street... As you can see there is no gap because the css (.additionalInfo selector) instructs the div to sit in the correct position on the grid.

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<title>GRID EXAMPLE</title>
<style>
.grid_for_uncle_dave {
display: grid;
grid-template-columns: 22% 50% 22%;
grid-column-gap: 3%;
width: 90%;
margin: 0 auto;
}
.resp_image_new {
width: 100%;
max-width: 100%;
height: auto;
}
.aside_1 {
grid-col: 1/2;
grid-row: 1/3;
}
.aside_2 {
grid-col: 3/4;
grid-row: 1/3
}
.mainContent {
grid-col: 2/3;
grid-row: 1/2;
}
.additionalInfo {
grid-col: 3/4;
grid-row: 2/3;
background-color: yellow;
}
</style>
 </head>
 <body>
<div class="grid_for_uncle_dave">

<aside class="aside_1">
<img class="resp_image_new" src="http://v58.ancestry.higgsy.co.uk/archive/ANC/ANC030_Dave_Rockliffe_cropped350w.JPG" alt="Dave Rockliffe Junior" />
Archive: ANC030
</aside>
<!-- close aside_1 -->

<main class="mainContent">
<p>I always knew him as my Uncle Dave but he was the son of <a href="peterson_alice_mary_doll.html">Kitty&rsquo;s sister Alice Mary</a> so he is actually my cousin. Alice Mary died in 1947 when dave was just sixteen</p>
<p>On the left we see him in about 1936. Someone in the family once said &quot;<em>he rarely smiled as a baby&quot;</em> and this kind of proves it!</p>
<p>During the war David was evacuated to Newbury, staying with a Mrs Shelton. She would have been paid 10/- (50p) a week for having an evacuee.</p>
<p>David left home at eighteen when his father,<a href="rockliffe_david_thomas.html"> David</a>, re-married so Uncle Dave went to live in Dombey Street with Kitty.</p>
<p>In 1949 Dave married Mary Elizabeth Savage and they had two boys Peter and John and a daughter Linda. They lived in a flat in Drury Lane and later above a shop in Grays Inn Road.&nbsp; They later divorced.</p>
<p>He once worked for Traceys the funeral directors. This was the firm that arranged the burial of <a href="binning_harry_ernest_nonty.php">Nonty Binning</a> and Dave's sister, <a href="rockliffe_renee.html">Renee</a>.</p>
<p>In 1970 Dave was married Marie Patricia Brock (see them on the right here). Sadly she died of cancer in 1976.  After this Dave was with his partner Maggie for many years.</p>
<p>The family once lived in <a href="http://www.british-history.ac.uk/survey-london/vol46/pp336-357">Rawstorne Street</a></p>
</main>
<!-- close mainContent -->

<aside class="aside_2">
<img class="resp_image_new" src="http://v58.ancestry.higgsy.co.uk/archive/825_dave_and_marie_cropped_w600.JPG" alt="" />
Archive: ANC030
</aside>
<!-- close aside_2 -->

<div class="additionalInfo"
<p>The below photo is at his 80th birthday celebrations in 2011. left to right: John, Linda, Dave, Paul, me, Susan and John. Susan (n&eacute;e White), is Renee White&rsquo;s daughter.  <a href="rockliffe_renee.html">Renee</a> was Uncle Dave&rsquo;s sister.</p>
<img class="resp_image_new" src="http://v58.ancestry.higgsy.co.uk/archive/489_uncle_dave_and_family_croppedsmaller_800w.JPG" alt="Uncle Dave and Family"/>
Archive:</span> 489 - On his 80th birthday in 2011
</div>
<!-- close additionalInfo -->

</div> <!-- close grid -->

 </body>
 </html> 

 

 

 

Grid needs time spent understanding it. At the moment its not necessary to use Grid for simple layouts in my opinon and I would advise continuing to use Flexbox as that is much easier and developer friendly. If at some stage you are going to be producing a complex layout and need more flexibility then that is the right time to investigate Grid.

 

There's really no benefit to using Grid when a simple layout is required, although of course you can use it but then again there is  a tendency for 'green horn developers' to use sledgehammer workflows to crack a nut. Facebook, Google, etc may well need these workflows, the majority of websites certainly do not require them and only add uneccessary complexity and sometimes bloat to the build process.

 

Currently Grid is excellent for producing image galleries as the options available are more flexible than Flexbox. Know when and where to use it to harness what benefits it offers.

 

Votes

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
community guidelines
Community Expert ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

What you are seeing is caused by the left-most column. The image and text are longer than the content in the center column at your screen size. They're all the same height. To see what I mean, give the left and right columns a css setting of  "border:1px solid black;" and you'll see that all columns are the same height, as designed. The center column can't shrink smaller than the left or right, so a space is added after the content.

Votes

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
community guidelines
LEGEND ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

What happened to the other content, image and text, in the center column starting:

 

'The below photo is at his 80th birthday celebrations in 2011.'

 

That seems to have disappeared now. That's what was screwing up the original grid, asumming that it was supposed to follow directly on from the text below, without any white vertical space:

 

'Rawstorne Street'

 

Which it could not do, unless the 2 side columns spanned all 3 rows of the grid, which needs to be specifically designated or as per my original post moving it to within the center column itself.

 

Now its been removed you don't have an issue, the grid is acting the way it should as there are no independent divs which will screw up the grid, unless they are specifically positioned on the grid.

 

As Jon has explained at a point where the browser viewport width is wider than the images in the left/right columns can shrink vertical the content in the center column will become shorter just as it will become longer at narrower browser viewport widths and protrude beyond the images in the left/right columns.

 

You CAN'T control the height of text, it consumes whatever space is needed, whether that be more or less, according to the browser viewport width. This is not DeskTopPublishing where you can condense the text, make it a smaller font size and 'concrete' it into place, allocating to a specific area to consume, the web is fluid and your  construction should take that into account.

 

 

Votes

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
community guidelines
Community Expert ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

To highlight the fluid nature of text online, take a look at how it displays on my monitor, using my normal "much less than full screen" browser window...

 

text1.jpg


...and a second shot at the same browser width, with the text enlarged for those with, let's call it "less youthful" eyes...

text2.jpg


...make sure to change the size of your design or preview space from time to time so you know how things will react to smaller screens than what you're working in. A fair number of your viewers won't be browsing the web in a full screen window on a 24" monitor. 



 

Votes

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
community guidelines
Participant ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

Many thanks to Jon and Osgood, What would I do without you?!  Your help is much appreciated even if I get to be called a greenhorn!! 🙂  I accept your advice about the un-necesary use of grid on a simple site, so I am today making a determined effort to refresh my little knowledge of Flexbox and will use that much more going forward. Thanks again.

Votes

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
community guidelines
LEGEND ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

LATEST

Your help is much appreciated even if I get to be called a greenhorn!!

 

No insult intended but we seem to have reached a point in web-development where a large number want to jump from A to Z, before going through the rest of the alphabet. Only going through the rest of the alphabet can you arrive at sensible decision making. Of course the downside to that is it takes a long, long time, not something that most are prepared to consider these days, especially IF you only 'dabble' in web-development, those people are excused. Those that consider themsleves serious web-developers are not.

 

Anyway if you encounter any more issues please post and I'm sure someone can provide some guidance.

Votes

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
community guidelines