Resize Column Across Multiple Rows Using Html Grid Layout

I've got a grid layout with 2 columns and 3 rows. I want to be able to resize the column widths. I know I can use resize: horizontal but that only changes width for one row. I'm th

Solution 1:

You can do it with your structure. The trick is to use auto 1fr on the template columns and set the initial width of the resizable element to be equal to 50vw to simulate the 1fr 1fr initially:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.log {
  overflow: auto;
  resize: horizontal;
  width:50vw;
}

.main {
  grid-row:2/span 2;
  grid-column:2;
}

body{
  margin: 0;
}


/* For presentation only, no need to copy the code below */.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}

<divclass="container"><divclass="logo"></div><divclass="search"></div><divclass="nav"></div><divclass="log"></div><divclass="main"></div></div>

If you will have content, you can do it like below:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.log {
  overflow: auto;
  resize: horizontal;
  width:50vw;
}
/* disable the width contribution so only the log will define the width */.logo,
.nav {
  width:0;
  min-width:100%;
}
/**/.main {
  grid-row:2/span 2;
  grid-column:2;
}

body{
  margin: 0;
}


/* For presentation only, no need to copy the code below */.container * {
  border: 1px solid red;
  position: relative;
}

<divclass="container"><divclass="logo"> Lorem ipsum dolor sit amet, consectetur .</div><divclass="search"></div><divclass="nav">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </div><divclass="log"></div><divclass="main"></div></div>