Comparing and contrasting: Grid, Margin, Flex, Float

[Ray.H]

@asasass

But now you just added float into it which, I’d rather use the regular float code then.

Yes I did use floats. But I don’t have a bunch of classes with different margins .

By setting them in div rows ( and you introduced div rows in your recent methods too) I was able to set bottom margins on those divs.

I’ve only used margins in two rules…

.wrap div {
   display:table; /*contain floats*/
   margin: 0 0 4px 0;

.wrap a {
   float:left;
   margin-right:4px;
   width:50px;
   height:50px;
   border:3px solid blue;
   background:lime;
}

Then removed them on the far right anchors and last div

.wrap div:nth-child(3),
.wrap div a:last-child {margin:0;}

The same effect as your other versions accomplished with less code
EDIT: And the entire layout can be resized just by changing the anchor sizes.

[Mittineague]

@Paul_Wilkins

the intention to achieve the same effect as tables.

Part of me thinks there must be more to it besides substituting non-table tags for table, tr, and td tags as some sort of “be semantic” loophole and I just don’t know what that more is. Because nowadays there can be virtually any viewport dimensions, and I dislike horizontal scrollbars, unless it’s tabular content I don’t consider using table either HTML or CSS

[asasass]

@Paul_Wilkins

The links are 50 x 53

Edit fiddle - JSFiddle - Code Playground

They should be
50 x 50

How would I adjust that?

.wrapc .nav div{
  flex: 0.3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.wrapc .nav a {
  flex: 0.18;
  border: 3px solid #0059dd;
}

[Ray.H]

A lot of us use display:table; for other reasons besides table layout.

As with the code I posted in #37.

1. I’m using display:table on the main parent to shrinkwrap to the child elements.
2. display:table on the inner divs is being used to contain floats

Just taking advantage of display:table side effects without getting trapped in it’s rules when table-row and table-cell gets introduced

[Paul_Wilkins]

@asasass

@Paul_Wilkins

The links are 50 x 53
https://jsfiddle.net/m9wexxny/265/

Flex doesn’t give you pixel precision. Is it called flex for the reason that it is flexible, not rigid.

[asasass]

Yes it does

Edit fiddle - JSFiddle - Code Playground

.wrapc .nav div {
  display: flex;
  flex-basis: 50px;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
}

.wrapc .nav a {
  flex-basis: 50px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

flex-basis - CSS: Cascading Style Sheets | MDN

[asasass]

This works too.

Edit fiddle - JSFiddle - Code Playground

.wrapc .nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wrapc .nav div {
  display: flex;
  justify-content: space-between;
}

.wrapc .nav a {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 3px solid #0059dd;
}

[PaulOB]

@Paul_Wilkins

So all of those numbers from post #9 are magic numbers, those being 54px, 108px, 162px, and 216px.

Yes.

They all rely on something else for them to be right. If the size of the block was changed then you would have to change all of those as well.

Imagine if you had a. 100 of them in a row- you’d have to change everyone. In all my previous examples you would just need to change one rule to accommodate a change in size.

@Mittineague

unless it’s tabular content I don’t consider using table either HTML or CSS

On the contrary the display table properties are still one of the most powerful layout tools and I have used them extensively in every project for the last ten years. They are robust and powerful when used correctly.

They should not be used for tabular data at all but solely for layout algorithms. They impart absolutely zero semantic influence over the html structure as they are completely separate disciplines.

I still will defer to display table over flex because I know it works everywhere. I don’t see a point in not using something that works well and swapping for something else just because it’s new. I of course use flex when the layout requires it or flex is easier.

However for assass’s example the display table would be a little messy and flex or float are still the best choices for a simple approach.

There is no right answer just common sense based on experience:)

[ronpat]

For those who said it couldn’t be done using display:table/table-cell properties and with border-spacing. (no floats or flex) And like Ray’s, changing the anchor size, changes the everything else to fit.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>table border-spacing 2</title>
<!--
https://www.sitepoint.com/community/t/comparing-and-contrasting-grid-margin-flex-float/286159/49
-->
    <style>
html {
  box-sizing:border-box;
}
*, *::before, *::after {
  box-sizing:inherit;
}
.outer {
    display:table;
    border:3px solid red;
    position:relative;
    overflow:hidden;     /* parent container and overflow:hidden are p/o border-spacing fix */
    margin:0 auto;
}
.table {
    display:table;
    table-layout:fixed;
    border-spacing:4px;  /* the border-spacing bugaboo */
    margin:-4px;         /* negative margin offsets border-spacing around table border */
}
.trow {
    display:table-row;
}
.trow a {
    display:table-cell;
    vertical-align:middle;
    width:50px;
    height:50px;
    background-color:lime;
    border:3px solid blue;
}
.outer::before,
.outer::after {
    content:"";
    display:table-cell;  /* optional */
    position:absolute;
    top:0;
    bottom:0;
    width:34%;
    pointer-events:none;
}
.outer::before {
    left:0;
    border-right:3px solid red;
}
.outer::after {
    right:0;
    border-left:3px solid red;
}
    </style>
</head>
<body>

<div class="outer">
    <div class="table">
        <div class="trow">
            <a href="#nogo"></a>
            <a href="#nogo"></a>
            <a href="#nogo"></a>
            <a href="#nogo"></a>
            <a href="#nogo"></a>
        </div>
        <div class="trow">
            <a href="#nogo"></a>
            <a href="#nogo"></a>
            <a href="#nogo"></a>
            <a href="#nogo"></a>
            <a href="#nogo"></a>
        </div>
        <div class="trow">
            <a href="#nogo"></a>
            <a href="#nogo"></a>
            <a href="#nogo"></a>
            <a href="#nogo"></a>
            <a href="#nogo"></a>
        </div>
    </div>
</div>

</body>
</html>

[codeispoetry]

@PaulOB

Grid: Plus: Good if you want to support only the very newest browsers. Minus: Code is more complex to understand unless you are familiar with it.

Flex: Plus: Easiest of the bunch (in this case) and much greater support than grid. Minus : Some bugs in IE and code can get complex for more sophisticated layouts…

Margin: No plus for this method: Never do this as it is unusable in a real situation and is a magic number nightmare. Did I say never ever do this.

Float: Plus : Will work back to year dot in every browser ever invented (almost). Simple to set up and use. Minus : Need to understand what float containment means.

This is a very nice summary. Thank you so much. If one knows using float correctly than float is really good.

[Paul_Wilkins]

[quote=“ronpat, post:50, topic:286159, full:true”]
For those who said it couldn’t be done using display:table/table-cell properties and with border-spacing.[/quote]

Where’s the background? The background image using a sliding doors technique to show behind the buttons is missing. (I couldn’t resist, as someone else is widely known for asking similar things.)

[PaulOB]

@asasass

This works too.

If I’m not mistaken I believe you were offered a flex solution many thousands of posts ago but ignored it in favour of margin.

The flex solution doesn’t need the extra div rows in the middle and could be simplified.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrapc {
  position: relative;
  width: 266px;
  height: 174px;
  overflow: hidden;
  margin-top: 8px;
  background: red;
}
.wrapc .nav {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-content:space-between;
  flex-wrap:wrap;
}
.wrapc .nav a {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 3px solid #0059dd;
}

</style>

</head>

<body>
<div class="wrapc">
 <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">
        <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>
 </nav>
</div>
</body>
</html>

I’ve only included the code for the boxes to show how they fit.

Of course as mentioned before a list would seem the best choice but if you are calling this a nav then you can use a nav as a wrapper instead of the div.

[Ray.H]

@PaulOB

The flex solution doesn’t need the extra div rows

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.

      <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>

[asasass]

Do you agree or disagree with me?
#46

[Ray.H]

There’s nothing to disagree with.
Flex does allow for fixed dimensions, along with not growing and not shrinking.

[asasass]

I was trying to do that and wasn’t able to figure out how to.

Thanks!!!

[Paul_Wilkins]

@asasass

Do you agree or disagree with me?
#46

Flex is not supposed to be used to give you pixel-precision for everything, box size, gap between boxes, and all.

[asasass]

@Paul_Wilkins

How come the audio isn’t playing?

Edit fiddle - JSFiddle - Code Playground

[asasass]

What’s the difference between

<nav class="nav">

and:

<div class="nav">

[Paul_Wilkins]

@asasass

What’s the difference between

<nav class="nav">

and:

<div class="nav">

The element name is what’s different there.