How to Make a Fixed Column in CSS Using CSS Grid Layout

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

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?

CSS grid with fixed widths for some columns

First of all you have 6 columns, but we can keep only 5 for this task. Second - we don't need to set fixed width in grid-template-columns if we are going to use t cells collapsing. Match easier to set fixed width for specific columns. Here you go

#wrapper {  display: grid;  gap: 15px;  grid-template-columns: auto auto 1fr auto auto;  grid-template-rows: auto; grid-template-areas:     "logo nav-primary nav-primary nav-primary search"    "nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary"    "aside-1 aside-1 article aside-2 aside-2"    "footer footer footer footer footer";}

/* Article: use up remaining width */
#article {  grid-area: article;}

/* Logo: use up a little width as possible */
#logo {  grid-area: logo;  max-width: 300px;}

/* Nav Primary: use up remaining width */
#nav-primary {  grid-area: nav-primary;}

/* Nav Secondary: use full width */
#nav-secondary {  grid-area: nav-secondary;}

/* Search: use up a little width as possible */
#search {  grid-area: search;  max-width: 180px;}

/* Aside 1: fixed with of 300px */
#aside-1 {  grid-area: aside-1;  width: 300px;}

/* Aside 2: fixed with of 180px */
#aside-2 {  grid-area: aside-2;  width: 180px;}

/* Footer: use full width */
#footer {  grid-area: footer;}

/* Demo style */
#wrapper>* {  background: #C4C4C4;  padding: 10px;  box-sizing: border-box;}

<div id="wrapper">  <article id="article">Article (use up remaining space)</article>  <header id="logo">Logo</header>  <nav id="nav-primary">Nav Primary</nav>  <nav id="nav-secondary">Nav Secondary</nav>  <form id="search">Search Form</form>  <aside id="aside-1">Aside 1 (fixed width: 300px)</aside>  <aside id="aside-2">Aside 2 (fixed width: 180px)</aside>  <footer id="footer">Footer</footer></div>

CSS grid with fixed column size that adds extra columns to fill width of container

Here's my implementation:

The auto-fit argument with repeat CSS function

.grid-item {
  border: 2px solid red;
  background: orange;
  color: red;
  padding: 10px;
  border-radius: 8px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-auto-rows: 200px;
  gap: 6px;
}

<div class="wrapper">
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
  <div class="grid-item">html</div>
</div>

Fixed number of columns with grid-auto-flow: column

You can use column-count: 3; instead of display: grid and add display: inline-block to the child elements.

.wrapper {
  column-count: 3;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  display: inline-block;
  width: 100%;
  margin: 5px;
  box-sizing: border-box;
}

.box:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
  <div class="box">13</div>
</div>