Fluid-responsive CSS Grid wallboard (no scaled images)

In this example below you will see how to do a Fluid-responsive CSS Grid wallboard (no scaled images) with some HTML / CSS and Javascript

Fluid-responsive CSS Grid wallboard without scaling images. No JavaScript. Uses one image per stamp.

Thumbnail
This awesome code was written by 2kool2, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 2kool2 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Fluid-responsive CSS Grid wallboard (no scaled images)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<main>

  <h1>Responsive CSS Grid wallboard</h1>

  <section>
    <div class=wallboard>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.25>
            <div class=stamp_imgBg-tall-flowers data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-blackTxt>Pictures of lily</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.25>
            <div class=stamp_imgBg-substitute data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-blackTxt-extraShadow>Substitute</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-tall-whiskey data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-blackTxt>Whiskey man</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=1>
            <div class=stamp_imgBg-chocolates data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Miracle cure</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.125>
            <div class=stamp_imgBg-tall-nightwear data-imgBrightness=110%></div>
          </div>
          <p class=stamp_copy-blackTxt>Sally Simpson</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=.75>
            <div class=stamp_imgBg-caine data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>My generation</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.75>
            <div class=stamp_imgBg-tall-magicBus data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Magic bus</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-roses data-imgBrightness=110%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>Pictures of lily</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-tall-right-hotelBreaks data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>In the hall of the<br>mountain king</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.25>
            <div class=stamp_imgBg-heinz data-imgBrightness=110%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Heinz Baked Beans</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.5>
            <div class=stamp_imgBg-tall-left-emptyGlass data-imgBrightness=105%></div>
          </div>
          <p class=stamp_copy-whiteTxt>Empty glass</p>
        </a>
      </div>

      <div class=wallboard_stamp>
        <a class=stamp_link href>
          <div data-vignetteOpacity=0.75>
            <div class=stamp_imgBg-teaHouseTheatre data-imgBrightness=115%></div>
          </div>
          <p class=stamp_copy-whiteTxt-extraShadow>Tea and theatre</p>
        </a>
      </div>

    </div>
  </section>
  
  <section>
    <div class=instructions>
      <div><b>&larr;</b> C&rsquo;mon and squeeze me! <b>&rarr;</b></span></div>
  </section>


  <section>

    <h2>Fluid-responsive CSS Grid wallboard <small><i>(no scaled images)</i> with <a class=lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/mXpwbL">Vignette &amp; Brightness hover effect</a></small></h2>

    <p>Wallboard fills all device widths up to 1844px without stretching or squeezing the images.</p>
    <p>Ideally the images should be 604px wide but <strong>must</strong> have the minimum safe-area of 296px (320px - 2 * spacing).</p>
    <p>The height of a single row image is completely variable.<br>The tall images are calculated as: (2 * single row height) + (1 * spacing).</p>
    <p>Most images are cropped from the centre, though left or right is equally usable, and purely dependent on the location of the safe-area.<br>For example: &ldquo;Mountain king&rdquo; crops left and &ldquo;Empty glass&rdquo; crops right.</p>
    
    <p>There's a version of this wallboard which has a flexbox fallback (supports IE 10) and doesn't use Custom Properties: <a target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/rJbGKq" class=lnk-txt>Fluid-responsive CSS Grid wallboard (no scaled images) with Flexbox fallback</a>.</p>

  </section>

</main>




<footer class=myStuff><style>.myStuff{z-index:10;font-weight:100;color:#777;font-size:16px;position:fixed;width:100vw;left:0;bottom:0;margin:0;background-color:hsla(269,19%,20%,.9);padding:.125em}.myStuff_lnk,.myStuff_lnk:visited{text-decoration-skip: ink;color:hsla(211,100%,72%,1);text-decoration-color:hsla(211,100%,72%,.5);transition:all .3s ease-out}.myStuff_lnk:focus,.myStuff_lnk:hover{color:#fff;text-decoration-color:currentcolor}</style><a class=myStuff_lnk target=_blank title="[LinkedIn - new window]" href="https://www.linkedin.com/in/mikefoskett">Mike Foskett</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/popular/?grid_type=list#">Popular pens</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/public/?grid_type=list#">Latest pens</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://websemantics.uk/">webSemantics</a></footer>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/2kool2/fluid-responsive-css-grid-wallboard-no-scaled-images-LQJyxe */
html {
  --spacing: 0.75rem;
}
@media (min-width: 48em) { /* 768px */
  html {
    --spacing: 1rem;
  }
}
body {
  font-family: regularfont, sans-serif;
  line-height: 1.5;
  margin: var(--spacing);

  font-family: sans-serif;
  line-height: 1.5;
  text-align: center;
  padding-bottom: 2rem;
  color: hsl(269,19%,30%);
  background-color: hsla(32,100%,85%,.35);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4'/%3E%3C/filter%3E%3C/defs%3E%3C!-- %3Cpath filter='url(%23a)' opacity='.3' d='M0 0h1200v256H0z'/%3E--%3E%3Crect filter='url(%23a)' opacity='.3' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
body * {
  box-sizing: border-box;
}
header {
  text-align: center;
  max-width: 40em;
  margin: 1rem auto;
}
main {
  margin-bottom: 1rem;
}
h1 {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
h2 {
  color: #fff;
  background-color: hsl(269,19%,30%);
  padding: var(--spacing);
  text-align: center;
  xmax-width: 29em;
  margin: var(--spacing) auto 1rem;
  font-size: 2rem;
  font-weight: 100;
  line-height: 1.25;
}
h2 small {
  font-size: 1.25rem;
  display: block;
}
p {
  text-align: left;
  max-width: 33em;
  margin: var(--spacing) auto;
}
.lnk {
  color: hsla(211, 100%, 72%,1); /* Darkest WCAG against #3a3a3a */
  text-decoration-skip: ink;
  text-decoration-color: hsla(211, 100%, 72%,.5);
  outline: 0 solid #fff;
  transition: all .3s;
}
.lnk:hover,
.lnk:focus {
  color: hsla(211, 100%, 98%,1);
  text-decoration-color: currentcolor;
  text-shadow: 0 1px 1px #000;
}

.instructions {
  overflow: hidden;
  font-size: 1rem;
  background-color: hsla(269,19%,30%,.1);
}
@media (min-width:34em) {
  .instructions {
    font-size: 1.5rem;
  }
}
.instructions div {
  transform: scale(0.75, 1);
  letter-spacing: -0.02em;
  animation: scaleArrow 5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
.instructions b {
  display: inline-block;
  opacity: .5;
  font-size: 2em;
  font-weight: 700;
  vertical-align: sub;
  transform: scale(.8, .75);
  animation: scaleArrow 5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes scaleArrow {
  50% {
    transform: scale(1.28, 1);
  }
}
@media (min-width: 34em) {
  @keyframes scaleArrow {
    50% {
      transform: scale(1.28, 1);
      letter-spacing: 0.02em;
    }
  }
}


/*
    CSS GRID

    Images best served as
    604px wide with a 296px minimum safe area.
    With a fixed height, preferably a multiple of the line-height (24px) to complement vertical rhythm.

    Here images are 604x240px and 604x496px
*/

.wallboard {
  --columns: 1;
  margin: 0 auto;
  display: grid;
  grid-gap: var(--spacing);
  grid-template-columns: var(--columns);
}
@media (min-width: 39.25em) { /* 628px - 2 columns contains: 2*296px (images) + 3*12px (--spacing) */
  .wallboard {
    --columns: 1fr 1fr;
  }
}
@media (min-width: 59.5em) { /* 952px - 3 columns contains: 3*296px (images) + 4*16px (--spacing) */
  .wallboard {
    --columns: 1fr 1fr 1fr;
  }
}


.wallboard {
  --imgMaxWidth: 604px;
  --imgSingleRowHeight: 240px; /* tall images work out to 492px and 496px - difference is due to --spacing change from 12px to 16px */

  max-width: 1844px; /* maximum size for 3 columns containing: 3*604px (images) + 2*16px (--spacing) */
  max-width: calc(var(--imgMaxWidth) * 3 + var(--spacing) * 2);
  margin: 1rem auto;
}

.wallboard_stamp {
  max-width: var(--imgMaxWidth);
}
/* All the tall images are in the  odd cells: 1, 3, 5,... */
.wallboard_stamp:nth-child(odd) {
  grid-row: span 2;
}

.stamp_link {
  position: relative;
  display: block;
}

[class^="stamp_imgBg"] {
  background-position: bottom center;
  height: var(--imgSingleRowHeight);
}
[class^="stamp_imgBg-tall"] {
  height: calc(var(--imgSingleRowHeight) * 2 + var(--spacing));
}

[class^="stamp_copy"] {
  font-size: 1.75rem;
  line-height: 1.25;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  text-align: center;
  transform: translate3d(-50%, 0, 0);
  margin: 0 0 .25rem;
  white-space: nowrap;
}
[class^="stamp_copy"][class*="-blackTxt"] {
  color: #000;
  text-shadow: 0 0 2px rgba(255,255,255,1); /* overlays the image so increase edge contrast for accessibility */
}
[class^="stamp_copy"][class*="-blackTxt-extraShadow"] {
  color: #000;
  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff; /* overlays the image so increase edge contrast for accessibility */
}
[class^="stamp_copy"][class*="-whiteTxt"] {
  color: #fff;
  text-shadow: 0 0 2px #000; /* overlays the image so increase edge contrast for accessibility */
}
[class^="stamp_copy"][class*="-whiteTxt-extraShadow"] {
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 1px #000; /* overlays the image so increase edge contrast for accessibility */
}


/* Responsive wallboard column positions */

@media (min-width: 39.25em) { /* 628px - 2 columns */

/*   .wallboard_stamp:nth-child(1) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(2) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(3) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(4) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(5) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(6) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(7) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(8) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(9) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(10) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(11) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(12) {grid-column: 1;} */

}


@media (min-width: 59.5em) { /* 952px - 3 columns */

/*   .wallboard_stamp:nth-child(1) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(2) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(3) {grid-column: 3;} */
/*   .wallboard_stamp:nth-child(4) {grid-column: 1;} */
  .wallboard_stamp:nth-child(5) {
    grid-column: 2;
    grid-row: 2 / span 2; /* Move stamp up to previous row to fill the gap */
  }
/*   .wallboard_stamp:nth-child(6) {grid-column: 3;} */
/*   .wallboard_stamp:nth-child(7) {grid-column: 1;} */
/*   .wallboard_stamp:nth-child(8) {grid-column: 2;} */
/*   .wallboard_stamp:nth-child(9) {grid-column: 3;} */
/*   .wallboard_stamp:nth-child(10) {grid-column: 1;} */
  .wallboard_stamp:nth-child(11) {
    grid-column: 2;
    grid-row: 5 / span 2; /* Move stamp up to previous row to fill the gap */
  }
/*   .wallboard_stamp:nth-child(12) {grid-column: 3;} */

}

/*
    Most images are cropped from the centre.
    Though left or right may be used dependent on where the safe-area is.
    For example:
*/
[class^="stamp_imgBg"][class*="-right"] {
  background-position: right center;
}
[class^="stamp_imgBg"][class*="-left"] {
  background-position: left center;
}



/* Stamp image vignette */

[data-vignetteOpacity] {
  position: relative;
}
[data-vignetteOpacity="1"] {--vignetteOpacity: 1;}
[data-vignetteOpacity="0.75"] {--vignetteOpacity: 0.75;}
[data-vignetteOpacity="0.5"] {--vignetteOpacity: 0.5;}
[data-vignetteOpacity="0.25"] {--vignetteOpacity: 0.25;}
[data-vignetteOpacity="0.125"] {--vignetteOpacity: 0.125;}
[data-vignetteOpacity="0"] {--vignetteOpacity: 0;}

[data-vignetteOpacity]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: var(--vignetteOpacity, 0.5);
  background-image: radial-gradient(
    ellipse at center,
    hsla(8, 60%, 0%, 0) var(--vignetteInnerRadius, 58%),
    hsla(8, 60%, 0%, 1) var(--vignetteOuterRadius, 150%)
  );
  box-shadow: inset 0 0 1rem 0
    hsla(8, 60%, 0%, calc(var(--vignetteOpacity, 0.5) / 2));
  transition: opacity 0.3s ease-out;
}
a:hover [data-vignetteOpacity]::after,
a:focus [data-vignetteOpacity]::after {
  opacity: 0;
}


/* Stamp image brightness */

[data-imgBrightness="100%"] {--imgBrightness: 100%;}
[data-imgBrightness="105%"] {--imgBrightness: 105%;}
[data-imgBrightness="110%"] {--imgBrightness: 110%;}
[data-imgBrightness="115%"] {--imgBrightness: 115%;}
[data-imgBrightness="120%"] {--imgBrightness: 120%;}
[data-imgBrightness="125%"] {--imgBrightness: 125%;}

[data-imgBrightness] {
  display: block;
  transition: filter 0.3s ease-out;
}
a:hover [data-imgBrightness],
a:focus [data-imgBrightness] {
  filter: brightness(var(--imgBrightness, 100%));
}





/* Images - 604px x 240px or 496px */

[class^="stamp_imgBg"][class*="-flowers"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/flowers.jpg);
}
[class^="stamp_imgBg"][class*="-substitute"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/substitute.jpg);
}
[class^="stamp_imgBg"][class*="-whiskey"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/whiskey.jpg);
}
[class^="stamp_imgBg"][class*="-chocolates"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/chocolate.jpg);
}
[class^="stamp_imgBg"][class*="-nightwear"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/nightwear.jpg);
}
[class^="stamp_imgBg"][class*="-caine"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/michael-caine.jpg);
}
[class^="stamp_imgBg"][class*="-magicBus"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/magic-bus.jpg);
}
[class^="stamp_imgBg"][class*="-roses"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/roses.jpg);
}
[class^="stamp_imgBg"][class*="-hotelBreaks"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/hotel-breaks.jpg);
}
[class^="stamp_imgBg"][class*="-teaHouseTheatre"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/tea-house-theatre.jpg);
}
[class^="stamp_imgBg"][class*="-emptyGlass"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/empty-glass.jpg);
}
[class^="stamp_imgBg"][class*="-heinz"] {
  background-image: url(https://websemantics.uk/pens/css-grid-wallboard/i/heinz.jpg);
}

Comments

More from 2kool2

FAQ using ARIA attributes to meet WCAG 2 level AA [without a button]

FAQ using ARIA attributes to meet WCAG 2 level AA [without a button]

By 2kool2
Codepen include - footer

Codepen include - footer

By 2kool2
Stamp vignette hover effect generator WIP

Stamp vignette hover effect generator WIP

By mike foskett
Vignette hover on CSS grid wallboard (non-scaled stamps) for Tesco Direct

Vignette hover on CSS grid wallboard (non-scaled stamps) for Tesco Direct

By mike foskett

You Might Also Like

Google Now Inspired Flip Cards

Google Now Inspired Flip Cards

By ettrics
Coding for Visual Learners example

Coding for Visual Learners example

By jrvliet
array cardio

array cardio

By vhlongon
session

session

By tijhaart
A Pen by george

A Pen by george

By avant111
Project 12 - Camper Leaderboard

Project 12 - Camper Leaderboard

By Tommats
Kiai Venns 2

Kiai Venns 2

By LPsyCongroo
Mapping Animation - Cumulative

Mapping Animation - Cumulative

By bcd
© 2018 - Copyright CodeSeek.co
contact email