Comparing and contrasting: Grid, Margin, Flex, Float

Hi Paul,
I realize you weren’t talking to me directly, but rather commenting on the use of div rows in the recent fiddles of asasass.

I only used the div rows in my float example from post #37 for the sake of making margins easier to manage and to group the anchors into rows.

After seeing the excessive divs in the last anchor I wasn’t concerned about throwing a few more in. :slight_smile:


      <a class="cube" href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
        <div class="left-background"></div>
        <div class="left-border"></div>
        <div class="middle-background"></div>
        <div class="right-border"></div>
        <div class="right-background"></div>
      </a>

I had that resolved thousands of posts ago too (and it was ignored) using linear-gradients like this…

.nav a.cube { background:
    linear-gradient(to right,
    rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.5) 13px, /*left block*/
    #0059dd 13px, #0059dd 16px,  /*3px border*/
    rgba(255, 255, 255, 0.5) 16px, rgba(255, 255, 255, 0.5) 28px, /*center block*/
    #0059dd 28px, #0059dd 31px,  /*3px border*/
    rgba(255, 0, 255, 0.5) 31px); /*right block*/
}

Like you always say, “There’s more than one way to skin a cat”

Since we’re going over all the different methods here’s another way to achieve the layout without the extra divs, floats, flex, or grid…

CSS Multi-Columns

Though I am in column direction instead of rows the central anchor for play button still lands in the same spot, along with the last anchor landing in the bottom right corner.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Mulit-Columns Grid</title>
<style>
.wrap {
   position: relative;
   width: 266px;
   height: 174px;
   overflow: hidden;
   margin-top: 8px;
   background:#ddd;
}
.nav {
   columns: 5; /*create 5 columns for anchors*/
   column-gap: 4px; /*side margins between anchors*/
}
.nav a {
   display:block; /*accept dimensions*/
   width: 50px;
   height: 50px;
   margin:0 0 12px;
   box-sizing: border-box;
   border: 3px solid #0059dd;
}
.nav a.ap {background:yellow}
.nav a.cube { background:
    linear-gradient(to right,
    rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.5) 13px, /*left block*/
    #0059dd 13px, #0059dd 16px,  /*3px border*/
    rgba(255, 255, 255, 0.5) 16px, rgba(255, 255, 255, 0.5) 28px, /*center block*/
    #0059dd 28px, #0059dd 31px,  /*3px border*/
    rgba(255, 0, 255, 0.5) 31px); /*right block*/
}
</style>

</head>

<body>
<div class="wrap">
 <nav class="nav">
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="ap"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="cube" href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
 </nav>
</div>
</body>
</html>
4 Likes