Question 263113 in CSS Question posted in
Some basic documentation can be found here.

CSS grid area overlap first column of all rows

I have a grid layout with two columns. Each sections is full width (two columns one row). The number of sections/rows is dynamic. In addition, I would like the menu DIV to occupy the first column of each row (overlapping the sections). In theory, the code should look like the following. Each section starts in the first column and ends in the last column. The menu, on the other hand, occupies the first column and extends to the last row. In practice, this doesn’t work. If I set the exact coordinates for each item using grid-area then it starts to work, but I can’t do it because I don’t know the number of sections/rows. Any ideas?

HTML:

<div class="scrollSections__grid">     
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  ... (nth-elements)

  <div class="scrollSections__menu"> </div>
</div>

CSS

.scrollSections__grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.scrollSections__section {
  min-height: 100svh;
  border: 2px solid blue;
  grid-row: 1 / -1;
  padding: 50px;
  background: red;
}

.scrollSections__menu {
  border: 2px solid red;
  grid-area: 1 / 1 / -1 / 2;
  padding: 30px;
}
Tags:

2

Answers


  1. 0

    If you’re looking for a grid, where the Menu occupies the the first column, and all other columns occupy the second column, you can continue using your grid method and simply add an encapsulating flex container.

    .grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.columns-container {
  display: flex;
}

.column {
  flex: 1;
}
    <div class="grid">
  <div class="menu">Menu </div>
  <div class="columns-container">
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You need to set the menu with position absolute, see the snippet

    .scrollSections__grid {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(99, auto);
  width: 200px;
  position: relative;
}

.scrollSections__section {
  border: 2px solid blue;
  grid-column: 1 / 3;
  height: 50px;
  margin: 2px;
}


.scrollSections__menu {
  border: 2px solid red;
  grid-column: 1 / 2;
  grid-row: 1 / -1;
    position: absolute; 
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;

}
    <div class="scrollSections__grid">     
  <div class="scrollSections__section">1</div>
  <div class="scrollSections__section">2</div>
  <div class="scrollSections__section">3</div>
  <div class="scrollSections__section">4</div>
  <div class="scrollSections__section">5</div>
  <div class="scrollSections__section">6</div>
  <div class="scrollSections__menu"> </div>
  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search