1 Correct answer
I'm going to cut to the chase and use CSS GRIDS because it does exactly what you want without media queries. And it will work with any number of items.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Evenly Distributed Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 95%;
margin: 0 auto;
padding: 2%;
}
.grid {
display: grid;
grid-template-columns: repea
41
Replies
Hi, I am working on adding text now under the images. Can you please tell me how to set the height of each area so that the text can flow freely without the boxes getting out of alignment vertically? (like if one sentence is much shorter than the one beside it). Thanks for all of the help! I'm learning so much!
https://carthagemills.com/Geosynthetic-products-test2.php
By @acobbcarthagemills
Its doesnt look like you are centering anything now so remove the below, marked in bold:
.module {
background: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
}
Height of is a relative term that means different things on different devices. For this reason, you should not use explicit height values. The default is 100%.
By @Nancy OShea
min-height is being set, thats not explicit, that would be height. Although Im not sure why min-height is being set here, its most likely not needed.
Module has min-height: 200px as a placeholder for the 200x200px image inside it.
By @Nancy OShea
I have no idea why though as it also has text in the module and the image may not be 200px x 200px. It might be anything, depending on what device the webpage is viewed on. There is simply no reason to set a min-height on the module.
When this discussion started there was no layout to speak of. We gave the OP an empty grid as a starting point. And here we are 12 days later...
Min-height = no less than.
Height = equal to.
Max-height = no more than.
Product evolution:
When this discussion started there was no layout to speak of. We gave the OP an empty grid as a starting point. And here we are 12 days later...
Min-height = no less than.
Height = equal to.
Max-height = no more than.
Product evolution:
By @Nancy OShea
You're stating the bl**dy obvious what they mean, not why you feel the necessity to use it when it actually is redundant in this particular instance. Given the images are responsive and could be any height considering the numerous screen sizes they would be viewed on.
I actually cant think of too many instances where min-height would be of much use, maybe apart from keeping a comment input box to a minmum. Im sure its a useful addition to have in the tool kit so it can be used when and where necessary, I personally just can't see it is in the situation we are discussing.
In the absence of placeholder images, It's common to give containers some dimension in early design phase. Would you prefer viewing this?
Or this?
Oh wait, I forgot you don't use Dreamweaver anymore so you have no experience with Live View.
In the absence of placeholder images, It's common to give containers some dimension in early design phase. Would you prefer viewing this?
Oh wait, I forgot you don't use Dreamweaver anymore so you have no experience with Live View.
By @Nancy OShea
Are you using a 56k dial up modem by any chance? I see the layout in a real browser pretty much exactly as it should be in a grid, with a slight delay of the images coming down but Im not seeing it as per your first image in one column. All I can suggest is maybe get a better bit of software with a better live view for web-development if that is what you are seeing. You do know DW is outdated now dont you? Geez your example isnt even waiting for images to come down, so somethings definately wrong with your set up.
HUH? No images were placed in either example. This is just plain vanilla CSS.
By @Nancy OShea
Which is actually amazing because your live view is not even showing the widths of the columns set in the css.
Like I said, you have no experience with Live View which uses a Chrome rendering engine.
Well it appears NOT to be doing a great job at interpreting the layout given its only css. I thought you stated numerous times in the forum you dont use DW live view because its not reliable, no?
Design View still behaves like IE 6-7, so it's useless for Grid layouts.
lol, why use it then. What the heck does your post prove, only that DW live view is unreliable, unless your developing for the year 2001.
You dont give containers a dimension in the absence of image placeholders you should be using some kind of method that can interpret the actual width and height of the images themselves that allocates the correct space for them. That way you dont get any page jumpiness. Just guessing at the min-height of the container isnt going to help much when you have text to take into account also, your content will still jump around a bit when the browser fits in the correct height of the images, so its a bit pointless.
It's doing what I wanted it to do in every browser and device I've tested so far.
I am sorry if I did anything to upset you, you sound upset by this conversation.
We are just a small business and I do a wide variety of things here, many that don't have anything to do with code, so I am far from an expert, and just appriciate learning whenever I can. Thanks again!
It's doing what I wanted it to do in every browser and device I've tested so far.
I am sorry if I did anything to upset you, you sound upset by this conversation.
We are just a small business and I do a wide variety of things here, many that don't have anything to do with code, so I am far from an expert, and just appriciate learning whenever I can. Thanks again!
By @acobbcarthagemills
No, you didnt do anything to upset anyone. We are just having a healthy debate about some minor inclusions in the code as to if its strictly necessary or not. Either way it isnt going to make any difference. Page is working just fine, although when I looked at it a few hours ago there was a few code errors. You have a few duplicated opening anchor tags which should not be there but don't seem to be making the browser throw a wobbly.
For instance (in bold)
<a href="<a href="https://carthagemills.com/stormwater-erosion-control-products.php"><u>Stormwater Products and BMPs</u></a>
I think there are a few more duplicates.
You also dont need the <u></u> tag when the link text is wrapped in an anchor tag as that is underlined by default.
AdChoices