CODEWITHSUNDEEP
htmlcssgridresponsive
Ryan Winter
Ryan Winter

Reputation: 15

Empty columns in responsive grid

I am having a bit of a dilemma. First off, here is a [codepen][1]. My issue is, I have a 4 column grid structure, with the left column reserved for subheadings, and content appearing in the other 3.

I have a section called 'social', whereby I want a 1 profile picture to display per column across the 3 columns. The issue is, when I add a new line of images, they start in the left column (the one reserved for the subheading). Is there a way to stop this by adding an empty column? I tried using a &nbsp but it seemed to just mess up my formatting.

A further question to this would be when the site becomes mobile, I would like the images to display 2 to a row. With the blank column added in, how would this affect how they are subsequently laid out in mobile? Would there be a blank space?

Sorry if this is confusing. I am still fairly new to all of this. Thanks for any help!

Upvotes: 1

Views: 1574

Answers (2)

user4759415
user4759415

Reputation:

Here is a snippet of CSS that will do the trick for you!

.image-item:nth-child(5n) {
   margin-left:25%;
 }

https://codepen.io/hoonin_hooligan/pen/rmPBro

What happening here is every 4th image-item we're adding an "extra" image-item of margin-left to it to create the illusion that your social column is a seperate entity from the rest of the image grid.

Removes the need for you to try and insert and empty column

Upvotes: 0

sol
sol

Reputation: 22939

Add your empty column like this:

<div class="grid-item empty">
 &nbsp;
</div>

for question one:

.empty {
  clear: both;
}

question two...

 /* whatever screen width you need */
   @media (max-width: 668px) {
      .empty {
         display: none;
      }
    }

Info about clear property.

CODEPEN

/* CSS Document */


/* Responsive Column Grid */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.row::after {
  content: "";
  clear: both;
  display: table;
  display: table;
}

.l-wrap .heading {
  width: 100%;
  border-top: 3px solid;
  border-top-style: solid;
  border-top-color: #9EF2F6;
  border-bottom: 3px solid;
  border-bottom-style: solid;
  border-bottom-color: #9EF2F6;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.l-wrap {
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
}

.l-quote {
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
}

.l-quote .l-single {
  width: 25%;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}

.four-col-grid .l-double {
  width: 75%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-bottom: 40px;
  float: left;
  background-color: #1F2975;
}

.four-col-grid .l-discuss {
  width: 75%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-bottom: 25px;
  float: right;
  background-color: #F95899;
}

.four-col-grid .grid-item {
  float: left;
  width: calc((100% - 20px * 4) / 4);
  margin-right: 10px;
  margin-left: 10px;
}

.four-col-grid .details {
  float: left;
  width: calc((100% - 20px * 4) / 4);
}

.four-col-grid:after {
  display: table;
  clear: both;
  content: '';
}

.four-col-grid .image-item {
  width: 25%;
  float: left;
}

.image-item {
  /* width property 
  padding-right: 10px;
  padding-left: 10px; */
  float: left;
  position: relative;
  width: 25%;
}

.image-item img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
  padding-bottom: 10px;
  margin-bottom: 30px;
  width: calc((100% - 20px * 4) / 4);
  margin-right: 10px;
  margin-left: 10px;
}


/* PROFILE HOVER */


/*
.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  padding-right: 10px;
  padding-left: 10px;  
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.four-col-grid:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
} */


/* -------- TEXT ELEMENTS -------- */

p span {
  display: block;
}

body {
  background: #ffffff;
  font-size: 22px;
  line-height: 32px;
  color: #ffffff;
  margin: 0;
  padding: 0;
  word-wrap: break-word !important;
  font-family: 'Poppins', sans-serif;
}

h1 {
  font-size: 50px;
  text-align: center;
  color: #1F2975;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 8px;
  line-height: 60px;
}

h2 {
  font-size: 20px;
  line-height: 34px;
  text-align: left;
  color: #1F2975;
  margin: 0;
  padding: 0;
  letter-spacing: 2px;
  border-top-style: solid;
  border-color: #9EF2F6;
}

h3 {
  font-size: 20px;
  line-height: 34px;
  text-align: left;
  color: #F95899;
  margin: 0;
  padding: 0;
  letter-spacing: 2px;
  font-weight: bold;
}

h4 {
  font-size: 20px;
  line-height: 34px;
  text-align: left;
  color: #1F2975;
  margin: 0;
  padding: 0;
  letter-spacing: 2px;
  font-weight: bold;
}

h5 {
  font-size: 20px;
  line-height: 34px;
  text-align: left;
  color: #F95899;
  position: absolute;
  width: 100%;
  letter-spacing: 2px;
  font-weight: bold;
}

p {
  text-align: left;
  color: #1F2975;
  font-size: 12px;
  margin: 0px;
  line-height: 15px;
}

p2 {
  text-align: left;
  color: #1F2975;
  font-size: 30px;
  line-height: 40px;
  font-weight: bold;
  color: #F95899;
}

p3 {
  text-align: left;
  color: #1F2975;
  font-size: 30px;
  line-height: 40px;
  font-weight: bold;
  color: #1F2975;
}

p4 {
  text-align: left;
  color: #1F2975;
  font-size: 12px;
  margin: 0px;
  line-height: 15px;
  font-weight: bold;
  display: block;
}

br {
  display: block;
  /* makes it have a width */
  content: "";
  /* clears default height */
  margin-top: 15px;
  /* change this to whatever height you want it */
}

a {
  color: #FFF;
}

.info {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  -webkit-column-width: 100px;
  /* Chrome, Safari, Opera */
  -moz-column-width: 100px;
  /* Firefox */
  column-width: 100px;
  padding-bottom: 30px;
  min-height: 200px;
}


/* -------- VIDEO ELEMENTS -------- */

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  margin-top: 10px;
  height: 0;
  overflow: hidden;
  max-width: 1170px;
  margin-bottom: 30px;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#container {
  margin: 0 auto;
  max-width: 890px;
}

.toggle,
[id^=drop] {
  display: none;
}


/* -------- NAV ELEMENTS -------- */


/* Giving a background-color to the nav container. */

nav {
  margin: 0;
  margin-bottom: 30px;
  padding: 0;
  background-color: #9EF2F6;
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 20px;
  line-height: 60px;
}


/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
  content: "";
  display: table;
  clear: both;
}


/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}


/* Positioning the navigation items inline */

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #9EF2F6;
  font-weight: bold;
}


/* Styling the links */

nav a {
  display: block;
  padding: 14px 20px;
  color: #1F2975;
  font-size: 17px;
  text-decoration: none;
}

nav ul li ul li:hover {
  background: #000000;
}


/* Background color change on Hover */

nav a:hover {
  background-color: #3DE5ED;
}


/* Hide Dropdowns by Default
 * and giving it a position of absolute */

nav ul ul {
  display: none;
  position: absolute;
  /* has to be the same number as the "line-height" of "nav a" */
  top: 60px;
}


/* Display Dropdowns on Hover */

nav ul li:hover > ul {
  display: inherit;
}


/* Fisrt Tier Dropdown */

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}


/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav ul ul ul li {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%
}

position: relative;
top:-60px;

/* has to be the same number as the "width" of "nav ul ul li" */

left:170px;

}

/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
  content: ' ';
}
li > a:only-child:after {
  content: '';
}

/* Media Queries
--------------------------------------------- */
@media all and (max-width: 667px) {
  #logo {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
    float: none;
  }
  
  nav {
    margin: 0;
  }
  /* Hide the navigation menu by default */
  /* Also hide the  */
  
  .toggle + a,
  .menu {
    display: none;
    width: 100%;
  }
  /* TEXT ELEMENTS */
  
  h1 {
    font-size: 30px;
    text-align: center;
    color: #1F2975;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 8px;
    line-height: 36px;
  }
  
  p2 {
    text-align: left;
    color: #1F2975;
    font-size: 25px;
    line-height: 30px;
    font-weight: bold;
    color: #F95899;
  }
  
  p3 {
    text-align: left;
    color: #1F2975;
    font-size: 25px;
    line-height: 30px;
    font-weight: bold;
    color: #1F2975;
  }
  /* RESPONSIVE GRID */
  
  .l-wrap {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
  
  .l-wrap .heading {
    width: 100%;
    border-top: 3px solid;
    border-top-style: solid;
    border-top-color: #9EF2F6;
    border-bottom: 3px solid;
    border-bottom-style: solid;
    border-bottom-color: #9EF2F6;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 25px;
    margin-top: 25px;
  }
  
  .four-col-grid .grid-item {
    width: 100%;
    float: left;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
  }
  
  .four-col-grid .details {
    width: 100%;
    float: left;
    margin-bottom: 15px;
  }
  
  .four-col-grid .l-double {
    width: 100%;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-bottom: 40px;
    float: left;
    background-color: #1F2975;
  }
  
  .four-col-grid .l-discuss {
    width: 100%;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-bottom: 20px;
    float: left;
    background-color: #F95899;
  }
  
  .info {
    width: 100%;
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;
    -webkit-column-width: 100px;
    /* Chrome, Safari, Opera */
    -moz-column-width: 100px;
    /* Firefox */
    padding-bottom: 30px;
    padding-top: 30px;
    border-top: 2px;
    border-top-color: #9EF2F6;
    border-top-style: solid;
  }
  
  .image-item {
    /* width property 
      padding-right: 10px;
      padding-left: 10px; */
    float: left;
    position: relative;
    width: 50%;
  }
  
  .image-item img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
    padding-bottom: 10px;
    margin-bottom: 30px;
    width: calc((100% - 20px * 2) / 2);
    margin-right: 10px;
    margin-left: 10px;
  }
  
  .four-col-grid .image-item {
    width: 50%;
    float: left;
  }
  /* VIDEO ELEMENTS */
  
  .video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
  }
  
  .video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    padding-bottom: 50px;
    position: absolute;
  }
  /* Stylinf the toggle lable */
  
  .toggle {
    display: block;
    background-color: #9EF2F6;
    padding: 14px 20px;
    color: #1F2975;
    font-size: 17px;
    text-decoration: none;
    border: none;
  }
  
  .toggle:hover {
    background-color: #3DE5ED;
  }
  /* Display Dropdown when clicked on Parent Lable */
  
  [id^=drop]:checked + ul {
    display: block;
  }
  /* Change menu item's width to 100% */
  
  nav ul li {
    display: block;
    width: 100%;
  }
  
  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
    text-indent: 20px;
  }
  
  nav ul ul ul a {
    padding: 0 80px;
  }
  
  nav a:hover,
  nav ul ul ul a {
    background-color: #3DE5ED;
  }
  
  nav ul li ul li .toggle,
  nav ul ul a,
  nav ul ul ul a {
    padding: 14px 20px;
    color: #1F2975;
    font-size: 17px;
  }
  
  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #9EF2F6;
  }
  /* Hide Dropdowns by Default */
  
  nav ul ul {
    float: none;
    position: static;
    color: #1F2975;
    /* has to be the same number as the "line-height" of "nav a" */
  }
  /* Hide menus on hover */
  
  nav ul ul li:hover > ul,
  nav ul li:hover > ul {
    display: none;
  }
  /* Fisrt Tier Dropdown */
  
  nav ul ul li {
    display: block;
    width: 100%;
  }
  
  nav ul ul ul li {
    position: static;
    /* has to be the same number as the "width" of "nav ul ul li" */
  }
}
@media all and (max-width: 330px) {
  nav ul li {
    display: block;
    width: 94%;
  }
}
.empty {
  clear: both;
}
@media (max-width: 668px) {
  .empty {
    display: none;
  }
}
<nav>
  <div id="logo">Logo</div>

  <label for="drop" class="toggle">&#9776; Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li>
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">Reviews</label>
      <a href="#">Reviews</a>
      <input type="checkbox" id="drop-1" />
      <ul>
        <li><a href="#">By Rating</a></li>
        <li><a href="#">By Name</a></li>
        <li><a href="#">By Genre</a></li>
      </ul>
    </li>
    <li>
      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">Discussion</label>
      <a href="#">Discussion</a>
      <input type="checkbox" id="drop-2" />
      <ul>
        <li><a href="#">Start a Discussion</a></li>
        <li><a href="#">View Discussions</a></li>
      </ul>
    </li>
    <li><a href="#">Social</a></li>
    <li><a href="#">News</a></li>
  </ul>
</nav>

<!-- TITLE OF MOVIE -->
<div class="l-wrap">
  <div class="heading">
    <h1>TRAINSPOTTING 2</h1>
  </div>
</div>

<div class="l-wrap">

  <!-- YOUTUBE EMBED -->
  <div class='embed-container'>
    <iframe src='https://www.youtube.com/embed/EsozpEE543w' frameborder='0' allowfullscreen></iframe>
  </div>

  <div class="four-col-grid">
    <div class="grid-item">
      <h2>ABOUT</h2>
    </div>

    <div class="details">
      <p4>DIRECTOR</p4>
      <p4>Danny Boyle</p4>
      <br>
      <p4>WRITERS</p4>
      <p4>John Hodge, Irvine Welsh</p4>
      <br>
      <p4>STARRING</p4>
      <p4>Ewan McGregor, Ewen Bremner, Jonny Lee Miller, Robert Carlyle</p4>
      <br>
      <p4>DURATION</p4>
      <p4>1h17m</p4>
    </div>

    <div class="info">
      <p>First there was an opportunity......then there was a betrayal. Twenty years have gone by. Much has changed but just as much remains the same. Mark Renton (Ewan McGregor) returns to the only place he can ever call home. They are waiting for him:
        Spud (Ewen Bremner), Sick Boy (Jonny Lee Miller), and Begbie (Robert Carlyle). Other old friends are waiting too: sorrow, loss, joy, vengeance, hatred, friendship, love, longing, fear, regret, diamorphine, self-destruction and mortal danger, they
        are all lined up to welcome him, ready to join the dance.</p>
    </div>
  </div>

  <div class="four-col-grid">
    <div class="l-quote">

      <div class="grid-item">
        <h2>SYNOPSIS</h2>
      </div>

      <div class="l-double">
        <p2>"As juicy as the heroin they inject, Trainspotting 2 offers all the joys and woes of the original, with the same direction from Boyle that made the first such a treat."</p2>
        <br>
        <h3>JOHN SMITH</h3>
      </div>
    </div>
  </div>

  <div class="four-col-grid">
    <div class="grid-item">
      <h2>DISCUSSION</h2>
    </div>

    <div class="l-discuss">
      <p3>Name or question of the discussion topic</p3>
      <br>
      <h4>VIEW</h4>
    </div>

    <div class="l-discuss">
      <p3>Name or question of the discussion topic</p3>
      <br>
      <h4>VIEW</h4>
    </div>

    <div class="l-discuss">
      <p3>Name or question of the discussion topic</p3>
      <br>
      <h4>VIEW</h4>
    </div>
  </div>

  <div class="four-col-grid social">
    <div class="grid-item">
      <h2>SOCIAL</h2>
    </div>

    <div class="image-item">
      <img src="img/profile1.jpg" alt="Avatar" class="image">
      <div class="overlay">
        <div class="text">Hello World</div>
      </div>
    </div>

    <div class="image-item">
      <img src="img/profile2.jpg" alt="Avatar" class="image">
      <div class="overlay">
        <div class="text">Hello World</div>
      </div>
    </div>

    <div class="image-item">
      <img src="img/profile3.jpg">
    </div>
<div class="grid-item empty">
      &nbsp;
    </div>
    <div class="image-item clear">
      <img src="img/profile4.jpg">
    </div>

    <div class="image-item">
      <img src="img/profile5.jpg">
    </div>

    <div class="image-item">
      <img src="img/profile6.jpg">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions