<body class="body" onload="insertCssVar(728)">
<div class="main">
  <div class="header">
    <div class="content-width-form">
    <label for="content-width">Content Width:</label>
    <input type="text" name="content-width" id="content-width" />
    <select name="measurement" id="measurement">
      <option value="px">px</option>
      <option value="%">%</option>
      <option value="em">em</option>
    </select>
    <button onclick="saveWidth()" id="save">Save</button>
    <button onclick="clearWidth()" id="clear">Clear</button>
    </div>
  </div>
  <div class="inner">
    <h1>Create a fluid grid with Static Measurements</h1>
    <p>Enter a number in the Content Width input above to alter the width of this content block.</p>
    <p>Notice that the width never goes above 728px</p>
  </div>
  <div class="sidebar">
  </div>
  <div class="footer">
  </div>
</div>
</body>
.body {
  font-size: 18px;
  font-family: sans-serif;
}
.error {
  outline: 2px solid red;
  color: red;
}
.main{
  height: 100vh;
  display: grid;
  /*min() i only need the smallest value */
  grid-template-columns: 1fr min(100% - 30px, 728px, var(--content-size)) 1fr;
  grid-template-rows: 1fr 80vh 1fr;
  background: #444;
}
.header {
  display: grid;
  grid-template-columns: 1fr min(100% - 30px, 728px, var(--content-size)) 1fr;
  grid-column: 1 /span 3;
  grid-row: 1;
  background: #fff;
  box-shadow: 2px 2px 20px;
  z-index: 2;
}
.header > * {
  padding: 2%;
  grid-column: 2;
}
input, button, select {
  padding: .25em .5em;
  line-height: 24px;
  font-size: 18px;
  min-height: 24px;
  max-height: 38px;
  border: 1px solid #1976d2;
  border-radius: 4px;
}
label {
    vertical-align: bottom;
}
select {
    padding: 0.3em 0.5em;
}
button {
  background-color: transparent;
  border: 1px solid rgba(25, 118, 210, 0.5);
  color: #1976d2;
  border-radius: 4px;
}
#save {
  color: #fff;
  background-color: #1976d2;
}
.footer {
  grid-column: 1 /span 3;
  grid-row: 3;
  background: #fff;
}
.inner {
  display: block;
  grid-column: 2 / span 1;
  grid-row: 2;
  border: 1px solid #000;
  background: #fff;
}
.inner >* {
  padding: 2% 10%;
}
.sidebar {
  grid-row: 2;
}

@media screen and (min-width: 1078px){
  .main {
    /*again min() i only need the smallest value
    if user goes over the pixel value it won't be honored*/
    grid-template-columns: 1fr min(100% - 30px, 728px, var(--content-size)) 50px 300px 1fr;
  }
  .header {
  grid-column: 1 /span 5;
  grid-template-columns: 1fr min(100% - 30px, 728px, var(--content-size)) 50px 300px 1fr;
}
.header > * {
  grid-column: 2 / span 3;
}
  .sidebar {
    grid-column: 4;
    background: #fff;
}
  .footer {
  grid-column: 1 /span 5;
  }
}
const contentWidth = document.getElementById('content-width')
const measurement = document.getElementById('measurement')
let meas = measurement.options[0].value
let width = localStorage.getItem('content-width') ? localStorage.getItem('content-width') : 728

measurement.addEventListener('change', (v) => {
  meas = v.target.value
})
const alertUser = (width, meas) => {
  if ((width > 45.5 && meas === 'em') || (width > 728 && meas === 'px') || (width > 40 && meas === '%')) {
    contentWidth.classList.add('error')
    window.confirm("This size is larger than the allowed size. Please try a smaller size.")
  }
  if ((width <= 45.5 && meas === 'em') || (width <= 728 && meas === 'px') || (width <= 40 && meas === '%')) {
    contentWidth.classList.remove('error')
  }
}
console.log(width)
console.log(meas)
const insertCssVar = (width) => {
    const styles = `:root {--content-size: ${width}${meas};}`
		const styleSheet = document.createElement('style')
		styleSheet.innerText = styles
		styleSheet.id = `content_width`
		document.head.appendChild(styleSheet)
}
contentWidth.addEventListener('change', (v) => {
  width = v.target.value
})
const saveWidth = () => {
  localStorage.setItem('content-width', width)
  alertUser(width, meas)
  insertCssVar(width)
}
const clearWidth = () => {
  localStorage.removeItem('content-width')
  contentWidth.classList.remove('error')
  contentWidth.value = ''
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.