CodePen Embed - Custom Properties: Flexbox Layout and Media Queries

Live

​x
 
<p>
  Try to change window width. All the layout changes are in:
</p>
​
<pre>
<code>
@media (min-width: 640px) {
  :root {
    --layout-gap: 1em;
    --layout-column-width: 50%;  
  }  
}
@media (min-width: 768px) {
  :root {
    --layout-column-width: 25%;  
  }  
}
</code>
</pre>
​
<div class="container">
​
  <p class="column">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni expedita molestiae earum autem ex, aliquid, explicabo veniam nulla voluptas placeat perferendis numquam hic. Tempora, dolor aliquam quas magnam architecto aspernatur.
  </p>
  
  <p class="column">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni expedita molestiae earum autem ex, aliquid, explicabo veniam nulla voluptas placeat perferendis numquam hic. Tempora, dolor aliquam quas magnam architecto aspernatur.
  </p>
  
  <p class="column">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni expedita molestiae earum autem ex, aliquid, explicabo veniam nulla voluptas placeat perferendis numquam hic. Tempora, dolor aliquam quas magnam architecto aspernatur.
  </p>
  
  <p class="column">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni expedita molestiae earum autem ex, aliquid, explicabo veniam nulla voluptas placeat perferendis numquam hic. Tempora, dolor aliquam quas magnam architecto aspernatur.
  </p>  
​
</div>

Live

xxxxxxxxxx
 
/* layout container: */
.container {
  display: flex;
  flex-wrap: wrap;
  background: lightgrey;  
  justify-content: space-between;
}
​
/* layout column: */
.column {
  box-sizing: border-box;
  border: 1px solid black; 
  padding: 1em;
  margin: 0 0 1em 0;
  width: calc(    
    var(--layout-column-width) 
    - var(--layout-gap)/2 
  );
}
​
/* Breakpoints */
​
:root {
  --layout-gap: 0;
  --layout-column-width: 100%;  
}
​
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --layout-gap: 1em;
    --layout-column-width: 50%;  
  }  
}
​
@media (min-width: 768px) {
  :root {
    --layout-gap: 1em;    
    --layout-column-width: 25%;  
  }  
}
​
/* etc. */
​
body {  
  font-family: Georgia, serif;
}
​
* {
  transition: .2s all;
}
​

This Pen is owned by Martin Michálek on CodePen.

See more by @machal on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.