Line Up multiple columns and rows

[dbltoe]

New install of 1.57a with demo products and PHP 7.4 done to work on easy pages at https://tinyurl.com/y69sgjca

In the past, I had gotten a mod that produced evenly displayed rows although the columns in each row were different.

The idea is that the rows would all be the same height despite the column items being of different height.

Using the CSS column shortcut of columns: 155px 5; is not taking into account the maximum height of the previous row.

I've tried using min-height to no avail.

Google search is not finding the info or the mod I previously used.

Suggestions appreciated. Hopefully, something responsive in nature.

My allergy riddled body is just not clicking on all cylinders.

[lat9]

This has possibilities: https://brm.io/jquery-match-height/

[balihr]

The one I usually use: github

[DrByte]

This has possibilities: https://brm.io/jquery-match-height/

... and is already included in the v157 responsive_classic template.

[dbltoe]

I guess I'm just the stubborn type. In looking at matchheight, it was saying that it was more for older browsers and flexbox was touted as a better alternative for the newer browsers.

I also have an aversion to relying on the currency/safety of an external source to operate a feature on my site. "Just because you're paranoid doesn't mean they aren't after you."

I wound up using flexbox and two lines of CSS code to do what I wanted in several different scenarios.

The simple code looks something like:

<div id="boxWrapper">
  <div id="boxContainer>
    <div class="boxItem">
      WHATERVER YOU WANT IN THE BOX
    </div>
    <div class="boxItem">
       SECOND ITEM IN THE BOX
     </div>
    <div class="boxItem">
       THIRD ITEM IN THE BOX
     </div>
    <div class="boxItem">
       YOU GET THE IDEA
     </div>
  </div>
<br>
</div>

It can be put anywhere you want to display items in columns and rows and have them line up nicely.

Other than any special CSS items you place in the WHATEVER YOU WANT IN THE BOX, portion of the code, the stylesheet to control this is minimal.

#boxWrapper(text-align:center;}/* Lines all the items in the box up nicely. */
#boxContainer{display:flex;flex-flow: row wrap;justity-content:space-evenly;}/* Tells the container we'll be wanting it to adjust to the items we place in it. */
#boxItem{order: 0;flex: 0 1 auto;align-self: flex-start;padding:10px;box-sizing: border-box;min-width:200px;max-width:225px;}/* defines each box.  Padding and width are "adjust as required" */
#boxContainer br<clear:both;}/* Just to keep the right-hand column from jumping in where it doesn't belong. */

If you need a specific overall width for the box area, it can be specified in the #boxWrapper.

Adjustments to #boxContainer and #boxItem should be avoided.

Adjustments to any of the WHATEVER YOU WANT IN THE BOX can be done with the .boxItem prefix. For example, if you had and image with a link below it, the CSS would look something like:

#articleItem a img{padding-top:10px;height:72px;width:108px;box-sizing: border-box;}
#articleItem a{text-decoration:none;font-size:1.1em;}

If you wrap the a tag around the image, both the image and the title will act as a link. The text-align:center of fhe boxWrapper makes them line up nicely. AND, the user doesn't have to try and hit a small link on a mobile phone.

BTW, if you want to make it more memorable when updating, just change the "box" to something like your initials. You'll be able to find it quickly on upgrade.

I've tried it with six different windows' browsers. Let me know if it has a problem with the Mac browsers.

Caveat Emptor and, adjust as required.

PS Original link is invalid.

[shags38]

@ dbltoe ... Pardon my ignorance here but

It can be put anywhere you want to display items in columns and rows and have them line up nicely.

- for example between paragraphs of text on a page? ... and the css to control it - does this need to be a seperate css file or is this added into stylesheet.css?

cheers,
Mike

[dbltoe]

"One should never assume the knowledge level of the audience." A quote from Astronaut Ed White who could give a physics lecture to K-12 and grad students at the same time.

Divs are blocks of data. You could also think of them as a box. Not unlike boxes from the store, these "code boxes" can go well in some places but not in others. Your boxes fit well in the back seat, front seat or trunk of your car but you can't put them in the engine or gas tank. If you put the boxes on your car's roof, you will need that "wrapper" to hold them down.

As data boxes, they cannot be nested in a <p>, <img, or <ul> tag BUT, can go in an <li> tag. Div tags really help in manipulating the "look of a site" by better defining our workplace.

You'll note that ZC uses mainWrapper, navMainWrapper, logoWrapper, etc. That wrapper div allows us to treat every item in it with CSS code for that specific "area".

Some purists will drop the wrapper div when there are nested divs and no "bare" p, a, ul, li, img tags. They do that because most browsers will automatically add a hidden br before and after the div and they want to use the space to share their product.

If a p tag is not nested in a div, it will require a hard-coded <span> to change its size, color, justification, etc. Not fun when the color needs to be changed in several hard-coded p tags.

There is often confusion about the significance of <div id="boxWrapper"> and <div class="boxTitle">. Some will tell you an ID div can only be used once. Not quite correct. It can only be used once on THAT page. Otherwise logoWrapper showing up on every page would be a problem.

The class div is used when that div will show up more than once on the page.

If you have any doubts when inserting something like this, just google, "can I put a div in a ### tag?" Change the ### to the tag in question.

The controlling CSS can go in any stylesheet that affects the page using the div. If I use these boxes only on EZ-Page 3, then I would put the CSS in page3.css which is the custom stylesheet for EZ-Page 3. For this project, I used stylesheet_zEZcustom.css. Number one -- so I could easily find and change the code. Number two -- because the stylesheets are loaded alphabetically. This makes sure the code is not overwritten by a later-loading stylesheet.

This concludes today's virtual learning class.

BTW -- I also use stylesheet_zcustom.css for any changes to other general site styling. Can't use it in the case of custom stylesheets like the EZ-Page 3 scenario but, it is certainly helpful in testing an upgrade to have all your changes in one location.

[shags38]

"One should never assume the knowledge level of the audience." A quote from Astronaut Ed White who could give a physics lecture to K-12 and grad students at the same time.

Divs are blocks of data. You could also think of them as a box. Not unlike boxes from the store, these "code boxes" can go well in some places but not in others. Your boxes fit well in the back seat, front seat or trunk of your car but you can't put them in the engine or gas tank. If you put the boxes on your car's roof, you will need that "wrapper" to hold them down.

As data boxes, they cannot be nested in a <p>, <img, or <ul> tag BUT, can go in an <li> tag. Div tags really help in manipulating the "look of a site" by better defining our workplace.

You'll note that ZC uses mainWrapper, navMainWrapper, logoWrapper, etc. That wrapper div allows us to treat every item in it with CSS code for that specific "area".

Some purists will drop the wrapper div when there are nested divs and no "bare" p, a, ul, li, img tags. They do that because most browsers will automatically add a hidden br before and after the div and they want to use the space to share their product.

If a p tag is not nested in a div, it will require a hard-coded <span> to change its size, color, justification, etc. Not fun when the color needs to be changed in several hard-coded p tags.

There is often confusion about the significance of <div id="boxWrapper"> and <div class="boxTitle">. Some will tell you an ID div can only be used once. Not quite correct. It can only be used once on THAT page. Otherwise logoWrapper showing up on every page would be a problem.

The class div is used when that div will show up more than once on the page.

If you have any doubts when inserting something like this, just google, "can I put a div in a ### tag?" Change the ### to the tag in question.

The controlling CSS can go in any stylesheet that affects the page using the div. If I use these boxes only on EZ-Page 3, then I would put the CSS in page3.css which is the custom stylesheet for EZ-Page 3. For this project, I used stylesheet_zEZcustom.css. Number one -- so I could easily find and change the code. Number two -- because the stylesheets are loaded alphabetically. This makes sure the code is not overwritten by a later-loading stylesheet.

This concludes today's virtual learning class.

BTW -- I also use stylesheet_zcustom.css for any changes to other general site styling. Can't use it in the case of custom stylesheets like the EZ-Page 3 scenario but, it is certainly helpful in testing an upgrade to have all your changes in one location.

Thanks for that excellent explanation dbltoe - if you are not a teacher by profession then you should be - I'm saving this post into my folder of notes for 'Site Mods' for future reference.

As always you have been very helpful which is much appreciated.

cheers,
Mike

[dbltoe]

Had a retired Lt Cmdr for an electronics teacher 56 years ago. His words have stayed with me and been invaluable over all these years. "You will NOT be able to know or remember everything about electronics. What you really need to learn is where to go in order to find your answer."

The only thing I'd add to that in today's world of Google is that you need to be as specific as possible with your query and know how to use " , -, and + in your searches.

https://www.digitalthirdcoast.com/bl...ls-google-work

[shags38]

Had a retired Lt Cmdr for an electronics teacher 56 years ago. His words have stayed with me and been invaluable over all these years. "You will NOT be able to know or remember everything about electronics. What you really need to learn is where to go in order to find your answer."

The only thing I'd add to that in today's world of Google is that you need to be as specific as possible with your query and know how to use " , -, and + in your searches.

https://www.digitalthirdcoast.com/bl...ls-google-work

Thanks for the search tip dbltoe ... speaking of Navy people, I joined some 51 years ago now (when ships were made of wood and men made of steel ) I had an instructor who had two sayings that stuck, 'repetition is the master of all learning' and 'persist and you will succeed' (not his compositions obviously) - he was trying to impress upon us that if you do it often enough you will learn and that if you persist then you will do it often enough to learn.

Keep the lessons coming !!