Inspiring

Answered

Why is the centre grid item so long?

Forum|Forum|5 years ago
December 8, 2020
4 replies
767 views

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

This topic has been closed for replies.

Correct answer Jon Fritz

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...

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

...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.

Jon Fritz

Correct answer

Community Expert

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...

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

...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.

higgsydAuthor

Inspiring

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.

O

osgood_

Legend

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.

higgsydAuthor

Inspiring

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)

O

osgood_

Legend

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.

Jon Fritz

Community Expert

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.

O

osgood_

Legend

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded