this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet.

I have tested this fallback in IE11 and it seems to work well, if you want your column layout to behave normally in older non css grid browsers. This uses the @supports css tag.

The difference with this is that the divs stay at a % if it does not support grid.

Resize in IE11

Here you can see how both columns change size when the screen is resized.

Resize in Chrome

And here you can see the fixed width of the left, while the right content resizes.

css

.widgets {
	width:30%;
	float:left;
}
.page-content {
	width:60%;
	float:left;
	margin-left:20px;
}
@supports (display: grid) {
	.widgets {
		width:auto;
		float:none;
	}
	.page-content {
		width:auto;
		float:none;
		margin-left:0px;
	}
}
.middle-content {
	background:#FFF;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
	padding:20px 20px;
	margin:40px auto;
	overflow:auto;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 240px auto;
	grid-template-areas: "widgets content";	
}
.widgets {
	grid-area: widgets;
}
.page-content {
	background:#CCC;
	grid-area: content;
}
.box {
	background:#666;
	padding:30px;
	border-radius: 5px;
	min-height:300px;
}

html

<div class='wrap middle-content'>
    <div class='widgets'>
        <div class='box'></div>
    </div>
    <div class='page-content'>
        <div class='box'></div>
    </div>
</div>

example

Related Links

https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks