34477

CSS Grid with dynamic heights for columns and growing rows not fully working

Question:

Related partially to <a href="https://stackoverflow.com/questions/49259136/remove-empty-space-in-css-grid" rel="nofollow">Remove empty space in CSS Grid</a>, but with a few changes I am trying to achieve.

I basically want my rows and columns to be able to grow and shrink according to the amount of content there is. If you look at this <a href="https://codepen.io/truetaurus/pen/jzWqzY" rel="nofollow">example on CodePen</a> you can see that the content of the blue div overflows into the pink footer. It should really push the footer down. Same applies if the red section had a lot content.

Also the top green section should too increase in height dynamically. And if there is no content, for example none in the green section, then it should have the red bottom section push up to fill in the empty space.

Anyone have an idea how to achieve this?

Here is a little snippet:

<div class="grid"> <div class="top">top<br/>top second line<br/></div> <div class="right"> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> </div> <div class="bottom"> bottom </div> </div> <div class="footer">Footer</div>

And the css so far:

.grid { display: grid; grid-template-columns: 645px 316px; grid-template-rows: repeat(25, 10px); grid-column-gap: 20px; } .top { grid-column: 1 / 2; grid-row: 1 / 4; background-color: green; } .right { grid-column: 2; grid-row: 1 / -1; background-color: blue; } .bottom { grid-column: 1; grid-row: 6 / -1; background-color: red; } .footer { width: 100%; height: 50px; background-color: pink; }

Answer1:

Define the grid with <strong>4 rows</strong> and put the footer inside the grid.

The header/footer can size according to their content while the bottom div explands to take up the remaining space.

<a href="https://codepen.io/Paulie-D/pen/vRLKGx" rel="nofollow"><strong>Codepen Demo</strong></a>

<pre class="snippet-code-css lang-css prettyprint-override">.grid { display: grid; grid-template-columns: 645px 316px; grid-template-rows: min-content 1fr min-content min-content; grid-column-gap: 20px; } .top { grid-column: 1 / 2; background-color: green; } .right { grid-column: 2; grid-row: 1 / span 4; background-color: blue; } .bottom { grid-column: 1; background-color: red; } .footer { height: 50px; background-color: pink; grid-column: 1 /-1; grid-row: 4; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="grid"> <div class="top">top<br/>top second line<br/></div> <div class="right"> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> </div> <div class="bottom"> bottom </div> <div class="footer">Footer</div> </div>

For the footer outside the grid - use <strong>3 rows</strong>

<pre class="snippet-code-css lang-css prettyprint-override">.grid { display: grid; margin: auto; width: calc(645px + 316px + 20px); grid-template-columns: 645px 316px; grid-template-rows: min-content 1fr min-content; grid-column-gap: 20px; } .top { grid-column: 1 / 2; background-color: green; } .right { grid-column: 2; grid-row: 1 / span 3; background-color: blue; } .bottom { grid-column: 1; background-color: red; } .footer { height: 50px; background-color: pink; margin: auto; width: calc(645px + 316px + 20px); } <pre class="snippet-code-html lang-html prettyprint-override"><div class="grid"> <div class="top">top<br/>top second line<br/></div> <div class="right"> </div> <div class="bottom"> bottom a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> </div> </div> <div class="footer">Footer</div>

Recommend

  • PHP automatically refresh page if the content of a specific file has changed
  • Setting color for textview dynamically using spinner?
  • How to limit break-all to only long words?
  • How to show that Shift Left Logical multiplies by 2^n?
  • How to remove extra space caused by word-wrap in shrunk to fit element?
  • What code changes are required to migrate C++ from VS2003 to VS2005?
  • Remove border around the color in an input[type=color] in Firefox?
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • How many View Controllers should I have in my game?
  • Upper limits for fibonnacci
  • Creating a Multi-Step Modal Using Jquery
  • Is there any way to call saveCurrentTurnWithMatchData without sending a push notification?
  • Changing references to deprecated methods C++
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • Get the number 18437736874454810627
  • Aptana 3 remove bundle (jquery)
  • How do I retrieve the user information of a user authenticated with Apache's mod_ldap?
  • How do I formally document a C# Attribute in UML?
  • How to print columns containing value
  • Uncaught TypeError: $(…).select2 is not a function
  • List images(01.png) and descriptions(01.txt) from directory
  • Silverlight DependencyProperty.SetCurrentValue Equivalent
  • D3 get axis values on zoom event
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Highlight and Bold text in JTextPane
  • How to use an array of arrays with array_map(…) in PHP?
  • FileReader+canvas image loading problem
  • Initializer list vs. initialization method
  • Xamarin Forms - UWP Fonts
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Nant, Vault & Windows Integrated Authentication
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to convert from System.Drawing.Color to Excel.ColorFormat in C#? Change comment color
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • SSO with signing and signature validation doesn't work
  • How to show dropdown in excel using jrxml (jasper api)?
  • Android Google Maps API OnLocationChanged only called once
  • How to push additional view controllers onto NavigationController but keep the TabBar?