CSS selectors and grids

Going through this tutorial on grids I realized that it uses regex like css selectors. It uses

[class*='-col'] {
  float: left;
}

Here is the final example on codepen

Here’s the w3 on css substrings.

In rewriting the grid system I used for the madart galleries page, I am going to make it a strict grid with two columns and a gutter in between the two columns.

Madison Union Art Galleries has two unique spaces in to display JMU students' photography in Warren Hall and Taylor Hall.
<div class="spacer50"></div>
<div class="odd-location">
<h4 style="text-align: center;"><a href="http://info.jmu.edu/madartgalleries/shows/photo-team-show/"><img class="attachment-266x266 odd-image-location alignnone" src="http://info.jmu.edu/madartgalleries/wp-content/uploads/sites/16/2013/11/6516812339_d8b1689684_m.jpg" alt="6516812339_d8b1689684_m" width="400" height="275" /></a></h4>
<div class="spacer50"></div>
<h4 style="text-align: center;">Airport Lounge</h4>
<div class="odd-text-location">On the fourth floor of Warren, the Airport Lounge is a cozy place full of couches and tables where students can relax, study, and socialize.</div>
</div>
<div class="odd-location">
<h4 style="text-align: center;"><a href="http://info.jmu.edu/madartgalleries/shows/photo-team-show/"><img class="even-image-location alignnone wp-image-680" src="http://info.jmu.edu/madartgalleries/wp-content/uploads/sites/16/2014/09/tdu-300x214.jpg" alt="tdu" width="400" height="275" /></a></h4>
<div class="spacer50"></div>
<h4 style="text-align: center;">Taylor Down Under (TDU)</h4>
TDU is a fun and vibrant space where students can enjoy the photographs while listening to music, playing pool, catching up with friends, or hanging out between classes.

</div>
<div class="odd-location">
<h4 style="text-align: center;"><a href="http://info.jmu.edu/madartgalleries/shows/photo-team-show/"><img class="attachment-266x266 alignnone odd-image-location" src="http://info.jmu.edu/madartgalleries/wp-content/uploads/sites/16/2013/11/6516812339_d8b1689684_m.jpg" alt="6516812339_d8b1689684_m" width="400" height="275" /></a></h4>
<div class="spacer50"></div>
<h4 style="text-align: center;">Madison Union 2nd Floor</h4>
<div class="odd-text-location">On the fourth floor of Warren, the Airport Lounge is a cozy place full of couches and tables where students can relax, study, and socialize.</div>
</div>
&nbsp;

And the CSS

.footer_bar {
margin-bottom: 0px;
}

.odd-image-location {
 float: left;
 margin-right: 3%;
margin-bottom: 50px;
}

.odd-location {
clear: both;
width: 100%;
}

.even-image-location {
 float: right;
 margin-left: 3%;
margin-bottom: 50px;
}

.spacer50 {
min-height: 80px;
}

I changed the HTML to

<div class="grid grid-pad">
<div class="col-1-2"><a href="http://info.jmu.edu/madartgalleries/shows/photo-team-show/">
<img class="attachment-266x266 odd-image-location alignnone" src="http://info.jmu.edu/madartgalleries/wp-content/uploads/sites/16/2013/11/6516812339_d8b1689684_m.jpg" alt="6516812339_d8b1689684_m" />
</a></div>
<div class="col-1-2">
<div class="spacer50"></div>
<h4 style="text-align: center;">Airport Lounge</h4>
<div class="odd-text-location">On the fourth floor of Warren, the Airport Lounge is a cozy place full of couches and tables where students can relax, study, and socialize.</div>
</div>
<div class="col-1-2 clear">
<div class="spacer50"></div>
<h4 style="text-align: center;">Taylor Down Under (TDU)</h4>
<p style="text-align: right;">TDU is a fun and vibrant space where students can enjoy the photographs while listening to music, playing pool, catching up with friends, or hanging out between classes.</p>

</div>
<div class="col-1-2"><a href="http://info.jmu.edu/madartgalleries/shows/photo-team-show/"><img class="even-image-location alignnone wp-image-680" src="http://info.jmu.edu/madartgalleries/wp-content/uploads/sites/16/2014/09/tdu-300x214.jpg" alt="tdu" /></a></div>
<div class="col-1-2 clear"><a href="http://info.jmu.edu/madartgalleries/shows/photo-team-show/"><img class="attachment-266x266 alignnone odd-image-location" src="http://info.jmu.edu/madartgalleries/wp-content/uploads/sites/16/2013/11/6516812339_d8b1689684_m.jpg" alt="6516812339_d8b1689684_m" /></a></div>
<div class="col-1-2">
<div class="spacer50"></div>
<h4 style="text-align: center;">Madison Union 2nd Floor</h4>
<div class="odd-text-location">On the fourth floor of Warren, the Airport Lounge is a cozy place full of couches and tables where students can relax, study, and socialize.</div>
</div>
</div>

And the CSS to

.footer_bar {
margin-bottom: 0px;
}

* {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.grid {
 margin: 0 0 0 0;
}
.grid:after {
 /* Or @extend clearfix */
 content: "";
 display: table;
 clear: both;
}

[class*='col-'] {
 float: left;
 padding-right: 50px;
 padding-bottom: 50px;
}
.grid [class*='col-']:last-of-type {
 padding-right: 0;
}

.col-1-2 {
 width: 50%;
}

/* Opt-in outside padding */
.grid-pad {
 padding: 20px 0 20px 20px;
}
.grid-pad [class*='col-']:last-of-type {
 padding-right: 20px;
}

.spacer50 {
min-height: 80px;
}

.odd-image-location {
 float: right;
min-width: 420px;
min-height: 225px;
}

.even-image-location { 
min-width: 450px;
min-height: 225px;
}

.clear {
 clear: both;
}