CODEWITHSUNDEEP
csscss-grid
davidjh
davidjh

Reputation: 417

How to avoid white space using CSS display:grid

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 :)

Upvotes: 1

Views: 3596

Answers (1)

casraf
casraf

Reputation: 21684

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.

Upvotes: 1

Related Questions