1

Am i missing a trick using CSS display:grid?

I have the following example - https://codepen.io/anon/pen/NyRVeO

We are trying to have a two column template using 

grid-template-columns:1fr 3fr;
grid-gap:20px;
grid-template-areas:'title title' 
                  'image map' 
                  'address map' 
                  'floorplan accessibility' 
                  'facilities parking' 
                  'teams bicycle'
                  '. meetingrooms'
                  '. evacuation';

Currently it has quite large white gaps under floor plans and also parking, due to the grid rows.

Is there a way to avoid this?

I know I could wrap all the items in the left in a sort of related div and then that would avoid the issue, but I am really trying to avoid that.

The page example will be generated by a CMS template and ideally we are trying to enable designers to move elements around the page using the CSS grid and not have to amend the HTML markup and template.

I am not sure what I want is possible but thought I would ask incase I'm missing a trick.

Thanks :)

davidjh
  • 387
  • 1
  • 7
  • 13
  • You have `grid-gap` there with 20px, remove that? If you want to implement gaps in only certain parts of the grid and not all, you might as well use `padding` and `margin` on the relevant children. Also, consider if the distinction between `grid-row-gap` and `grid-column-gap` is helpful to you – casraf Feb 07 '18 at 09:53
  • The `grid-gap` isnt the issue I am trying to resolve. The main issue is the huge white gap, far more than 20px that is under the parking content. Its because the other element in the same grid row 'facilities at this location' is far bigger in height so its increasing the row height. I just didn't know if there was a solution to resolving that. – davidjh Feb 07 '18 at 09:55
  • I see. I'll work on your fiddle and come up with something – casraf Feb 07 '18 at 10:01
  • https://stackoverflow.com/q/44377343/3597276 – Michael Benjamin Feb 07 '18 at 21:59

1 Answers1

1

One solution I see is to split the grid into 2 main areas, a sidebar and content (also the title, make that 3).

I made those 2 their own grids, just to ease the template row setup. I'm not sure if this is what you had in mind, but now each column in the grid goes from top to bottom with no unnecessary gaps in-between - but notice that now the sidebar items and the content items aren't aligned anymore.

CodePen: https://codepen.io/chenasraf/pen/VQmZZL

CSS:

main {
  width:100%;
  display:grid;
  grid-template-columns:1fr 3fr;
  grid-gap:20px;
  grid-template-areas: 'title title'
                       'sidebar main';
}

.content, .sidebar {
  display: grid;
  grid-row-gap: 20px;
}

.content {
  grid-template-areas:
                  'map' 
                  'map' 
                  'accessibility' 
                  'parking' 
                  'bicycle'
                  'meetingrooms'
                  'evacuation';
}

.sidebar {
  grid-template-areas:
                  'image' 
                  'address' 
                  'floorplan' 
                  'facilities' 
                  'teams';
}

HTML:

<main>
    {...title...}

    <div class="sidebar">
        {...sidebar stuff...}
    </div>
    <div class="content">
        {...main content...}
    </div>
</main>

NOTE: As a rule of thumb, grids are exactly like tables - in the sense that they do not organize themselves in a masonry-like manner, instead each cell expands the entire row/column to make sure it can fit all the contents.

casraf
  • 21,085
  • 9
  • 56
  • 91
  • Hey, I had thought that as well and while it achieves what we want in visual terms. It doesnt quite match what we wanted in terms of our template markup, because we would need to make changes to the template if we wanted to move a sidebar item into the content area. We were hoping we could manage this all with css grid. I guess what we are looking for just isn't possible with Grid. – davidjh Feb 07 '18 at 10:16
  • 1
    You are looking for a masonry-like layout, which is not really possible with one single grid - consider all the grid items as a sort of table, where cells stretch the containing rows/columns so they fit inside and align with each other. I added a note in the answer – casraf Feb 07 '18 at 10:19
  • You could consider to split rows more robustly, and make sure larger content will fit multiple rows on the right, while on the sidebar, the adjacent content is put in less rows so they sum up to take the same amount of space. This might only bring you so much closer @davidjh – casraf Feb 07 '18 at 10:22