How to make a fixed column in CSS using CSS Grid Layout?

Question

I\'ve made a simple site with a #container div that is parent to two divs: #left and #right, by using Grid Layout:

Is there an

Answer 1

You wrote:

Is there any way to make the left column fixed?

I'd appreciate a way to make it work with the grid layout.

If you want the element to remain a grid item, then the answer is "no".

Once an element has position: absolute or position: fixed (which is a form of absolute positioning, with reference to the viewport), it takes on new characteristics:

• the element is removed from the document flow
• the element is removed from the grid formatting context
• the element is no longer a grid item

From the spec:

10. Absolute Positioning

An absolutely-positioned child of a grid container is out-of-flow and not a grid item, and so does not affect the placement of other items or the sizing of the grid.

So a grid item doesn't work well with absolute positioning.

However, you won't have a problem applying position: fixed to a grid container.

Consider managing your #left and #right elements separately. #left can be a fixed-position grid container. #right can be another grid container and remain in-flow.

---

Also, as an aside, you've given your grid items percentage-based padding:

.section {
    padding: 5% 5% 5% 5%;
}

When applying margin and padding to grid items (and flex items), it's best to stay away from percentage units. Browsers may compute the values differently.

• Percentage padding on grid item being ignored in Firefox
• Why doesn't percentage padding work on flex items in Firefox?