Search code examples
csscss-grid

Can't display my app properly using the CSS grid

I am not a front-end developer and had a hard time playing with CSS. I can't get my apps displayed in the grid that I want them to be.

Here is my code

html

<div class="container">
  <div class="Volcano-plots">
    <div *ngFor="let item of this.dataShareService.DEData | keyvalue">
      <app-plot-bulk-rnaseq-expr [data]=item.value></app-plot-bulk-rnaseq-expr>
    </div>
  </div>

  <div class="select-study-container">
    <select class="selectStudy" [(ngModel)]="dataShareService.selectedStudy" (ngModelChange)="refreshStudyPlots()" name="studList" placeholder="Select Study">
      <option *ngFor="let g of studies" [value]="g">{{g}}</option>
    </select>
  </div>

  <div class="Metadata">
    <app-study-metadata-table></app-study-metadata-table>
  </div>

  <div class="DE-result">
    <div class="DE-table">
      <app-study-de-table></app-study-de-table>
    </div>
    <div class="Single-Gene-Expr">
      <app-study-gene-expr-plot></app-study-gene-expr-plot>
    </div>
  </div>

  <div class="WGCNA">
    <div class="WGCNA-Correlation">
      <app-plot-wgcna-correlation-heatmap></app-plot-wgcna-correlation-heatmap>
    </div>

    <div class="WGCNA-Dendrogram">
      <app-wgcna-dendrogram-plot></app-wgcna-dendrogram-plot>
    </div>

    <div class="WGCNA-PathwayEnrichment">
      <app-wgcna-pathway-table></app-wgcna-pathway-table>
    </div>
    
    <div class="TBD">
      
    </div>
  </div>
</div>

css ，（no css in each individual app)

.container {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr 0.6fr 1.9fr 1fr;
  grid-auto-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Volcano-plots"
    "Study-Selector"
    "Metadata"
    "DE-result"
    "WGCNA";
}

.Volcano-plots { 
  grid-area: Volcano-plots; 
  max-height: 500 px;
}

.select-study-container {
  grid-area: Study-Selector;
  max-height: 30px;
  
}

.Metadata { 
  grid-area: Metadata; 
  max-height: 50px;
}

.DE-result  {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "DE-table Single-Gene-Expr"; 
  justify-content: stretch; 
  align-content: stretch; 
  justify-items: stretch; 
  align-items: stretch; 
  justify-self: stretch; 
  align-self: stretch; 
  grid-area: DE-result; 
  /* width: 100%; 
  height: 100%;  */
  max-height: 400px;
}
.DE-table {
  justify-self: stretch; 
  align-self: stretch; 
  grid-area: DE-table; 
  /* width: 100%; 
  height: 100%;  */
  max-height: 400px;
}
.Single-Gene-Expr {
  justify-self: stretch; 
  align-self: stretch; 
  grid-area: Single-Gene-Expr; 
  /* width: 100%; 
  height: 100%;  */
  max-height: 400px;

}

.WGCNA {
  display: grid; 
  grid-template-columns: 0.7fr 1.3fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "WGCNA-Correlation WGCNA-PathwayEnrichment"
    "WGCNA-Dendrogram TBD"; 
  grid-area: WGCNA; 
}
.WGCNA-Correlation {
  justify-self: stretch; 
  align-self: stretch; 
  grid-area: WGCNA-Correlation; 
  /* width: 100%; 
  height: 100%;  */
  max-height: 400px;
}
.WGCNA-Dendrogram {
  justify-self: stretch; 
  align-self: stretch; 
  grid-area: WGCNA-Dendrogram; 
  /* width: 100%; 
  height: 100%;  */
  max-height: 400px;
}
.WGCNA-PathwayEnrichment {
  justify-self: stretch; 
  align-self: stretch; 
  grid-area: WGCNA-PathwayEnrichment; 
  /* width: 100%; 
  height: 100%;  */
  max-height: 400px;
}
.TBD {
  justify-self: stretch; 
  align-self: stretch; 
  grid-area: TBD; 
  /* width: 100%; 
  height: 100%;  */
  max-height: 400px;
}

I want to make the display like this enter image description here

and here is what I got, there is a lot of empty space between my apps. enter image description here

Did I miss something in my code?

Solution

  • I put min-height 50px for each cell and the background: gray (and other custom styles), just for display purposes. You can remove them with your custom styles.

    In your implementation, each cell will take its content height or its row height (if its neighboring cell content is higher that its height).

    you can insert divs containing your content inside each cell as in the code (without your old css grid styles, as the classes volcano, DE-table and such are no longer represented as grid items, but rather they're only child divs of the grid cells, so don't worry about the grid look)

    If anything is unclear, ask in the comments.

    .grid-container {
  display: grid;
  gap: 4px;
  margin: 0;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  min-height: 100vh;
}

.cell {
  grid-column: auto/ span 2;
  /* custom style to be replaced */
  color: white;
  padding: 16px;
  background: lightgray;
  min-height: 50px;
  border: 3px dashed black;
}

.row {
  grid-column: auto / span 6;
}

.half-row {
  grid-column: auto/ span 3;
}

.two-thirds {
  grid-column: auto/ span 4;
}
    <div class='grid-container'>
  <div class="cell row">
    <div class="volcano">
      Volcano-plots
    </div>
  </div>

  <div class="cell row">
    <div class="metadata">
      Metadata
    </div>
  </div>

  <div class="cell half-row">
    <div class="DE-result"> DE-result</div>
    <div class="DE-table">DE-table </div>
  </div>

  <div class="cell half-row">
    <div class="Single-Gene-Expr">
      Single-Gene-Expr
    </div>
  </div>

  <div class="cell">
    <div class="WGCNA"> WGCNA </div>
    <div class="WGCNA-Correlation">
      WGCNA-Correlation
    </div>

  </div>

  <div class="cell two-thirds">
    <div class="WGCNA-PathwayEnrichment">
      WGCNA-PathwayEnrichment
    </div>
  </div>

  <div class="cell">
    <div class="WGCNA-Dendrogram">
      WGCNA-Dendrogram
    </div>
  </div>

  <div class="cell two-thirds">
    <div class="TBD">
      TBD
    </div>
  </div>
</div>