How can I put a CSS Grid fixed

Question

Im starting working with blazor and im using a CSS Grid and I want to put two grids as fixed position but when I put position: fixed in CSS Code the size and position of the grid change. How could I manage this? I saw some questions here in Stackoverflow but none of that was what I want.

body {
    margin: 0px;
}

.layout {
    height: 100%;
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
        'header header'
        'sidebar main';
}

.header{
    grid-area: header;
    background-color: red;
}

.main {
    grid-area: main;
    background-color: blue;
}

.sidebar {
    grid-area: sidebar;
    background-color: gray;
    padding: 10px 5px 5px 5px;
}

<html>
    <body>
        <div class="layout">
        
            <div class="header">
                <h1>Header</h1>
            </div>

            <div class="sidebar">
                <Sidebar/>
            </div>

            <div class="main">
                <h1>Main</h1>
            </div>

        </div>
    </body>
</html>

Thank you for your attention.

LionOnTheWeb · Accepted Answer · 2019-08-01 16:25:12Z

When you set the position of the grid div to fixed it takes the div out of the scope of its original parent, rather, out of the document flow. So whereas header followed the rules of the grid without the position fixed, with it, 'header' grid is no longer in the grid.

As for the side bar I believe you can achieve your desired result by following a technique similar to the one mentioned in this post with max-height and overflow: scroll: https://github.com/rachelandrew/cssgrid-ama/issues/24

Have you considered flex-grids? I created a code snippet below that might be what you're looking for..

html, body {
  margin: 0;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
display: flex;
flex-direction: row;
overflow: auto;
flex: 1;
}
.sections {
  flex: 1 1 auto;
  overflow: auto;
}
section {
  height: 100%;
  overflow: auto;
  border-bottom: 1px solid;
  background: lightgreen;

}

.sidebar {
  flex: 0 0 20%;
  background-color: lightgrey;
}

header {background: #f88}
section:last-child {border: none}
footer {background: lightblue}

<div id="container">
  <header>top</header>
  <main>
    <div class="sidebar">sidebar</div>
    <div class="sections">
    <section>1st</section>
    <section>2nd</section>
    <section>3rd<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
    </section>
    <section>4th</section>
    <section>5th</section>
    </div>
  </main>
  <footer>bottom</footer>
</div>

Logan Blangenois · Accepted Answer · 2019-08-01 14:52:20Z

2

Have you tried to set the position and the width like this ?

position: fixed;
left: 0;
width: 100vw;

answered Aug 1, 2019 at 14:52

Logan Blangenois

4132 silver badges11 bronze badges

6 Comments

LOL Jovem Over a year ago

The thing is the position and the size change, is not anymore the size of the Grid that I created.

Logan Blangenois Over a year ago

@LOLJovem if you looking to my codepen, you have the same result with/without fixed position. Just remove the height of the layout

LOL Jovem Over a year ago

My previus comment was a mistake. The only thing is not right is that I cant scroll the page, so I have some content in the main grid and I cant scroll the page to see the rest of the content. Thats why the position: fixed can't stay in my .layout.

Logan Blangenois Over a year ago

Oh, ok! So, you don't need grid for this. You can use flexbox like this example

LOL Jovem Over a year ago

Tbh the example is kinda confusing, theres no way to do like we had and just put the main with a scrollbar?

|

Collectives™ on Stack Overflow

How can I put a CSS Grid fixed

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related