I'm trying to figure out the following layout using only CSS and no @media query. Say I have the following starting point for HTML:
<div class="layout">
<div class="content"></div>
</div>
The .layout contains a block-level .content element which has 100% width but a max-width of X. (e.g., X = 400px.) As .layout widens, and right after the max-width of .content is reached, I would want to suddenly apply inline (right/left) spacing of S (e.g., S = 16px.)
This would cause the width of .content to shrink back at first, but as .layout width continues to grow, .content would grow back to X at which point the inline (right/left) spacing would continue to grow, keeping .content centered.
400px 401px 432px 434px
+----------+ +---------------+ +-----------------+ +-------------------+
|.layout | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
+----------+ | +-------+ | | +---------+ | | +---------+ |
|.content--| | |-------| | | |---------| | | |---------| |
|----------| | |-------| | | |---------| | | |---------| |
|----------| | 1 |-------| 1 | | 1 |---------| 1 | | 1 |---------| 1 |
|--400px---| => | 6 |-369px-| 6 | => | 6 |--400px--| 6 | => | 7 |--400px--| 7 |
|----------| | p |-------| p | | p |---------| p | | p |---------| p |
|----------| | x |-------| x | | x |---------| x | | x |---------| x |
|----------| | |-------| | | |---------| | | |---------| |
+----------+ | +-------+ | | +---------+ | | +---------+ |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
+----------+ +---------------+ +-----------------+ +-------------------+
I've been trying various configurations with display:flex and display:grid but can't get it to work. Here's the base I was starting from, but it does not have the spacing applied:
/* "Inactive ingredients" would not be present in the actual implementation. */
.layout {
/* Inactive ingredients: */
background-color: yellow;
height: 200px;
}
.content {
max-width: 400px;
margin: 0 auto;
/* Inactive ingredients: */
background-color: green;
height: 100%;
}<div class="layout">
<div class="content"></div>
</div>