This is just a general question, and a just out of interest one.
4-5 years ago many people objected strenuously against the use of flexbox, (don't be shy in saying why 
) although at that time 94% of users had a device or browser that supported its use. The main reason given was that IE8/9 did not support it and some browsers devices required prefixes. (easy to implement) Fallback pollyfils did exist at the time, and css auto-prefixers.
The same also applies to css such as transforms and many more specs.
Fast forward to 2018 and css grids are being actively supported by many, including as an alternative, (easy) system to Muse users, even though less than 80% of browsers and devices support its use, ('can i use', does not show older devices that are still in popular use, so I have deducted a few %).
I would not call css grids "easy to learn", and so far I have not seen a visual method of its use that I could recommend to anyone.
What I am wondering is, if it is just those requiring a more visual, (but very limited in my experiance) methods of both css layouts and other css features, (such as animations) that are now leaving the old 'its not compatible with xyz' way of thinking, or are others, (e.g. Coders) thinking the same way, or starting to?
37
Replies
pziecina wrote
We are getting back into discussing css grids, and not browser compatability.
Well yeah, that's why I don't use it yet because I'm not confident that its quite ready and I dont want to waste my time.
pziecina wrote
The simple fact is that only about 80% of browsers and devices in popular use support css grids, yet many visual layout tools and tutorials are pushing it usage on an unsuspecting user, without mentioning the browser support, fallback code, or the extra work required to create different sized layouts.
In that respect DW is perfect then
.......thats in no danger of getting ahead of itself.
pziecina wrote
osgood_ wrote
What I find crap about Flex is if you use something like justify-content: space between; it positions elements at the extreme ends of the container, even if you only have 2 items, for instance in a gallery set up, which have space to sit next to each other, that just looks plain stupid.
Now we have had no more posts, I will answer this point.
Use, justify-content: space-evenly;
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
It has a bug in IE & Edge, that is being fixed, but it does work in grids.
Nah, that don't work it just places the 3 boxes which have turned to row 2 centrally below the 4 boxes above them. I want the 3 boxes below the 4 above them to be over to the left, lined up under the first 3 boxes of the first row, like a grid, not some spazy layout which flexbox thinks I want. Unfortunately I have to use the conventional margin technique when building a grid because flexbox cant do a symetrical grid which has an odd number of boxes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex Evenly</title>
<style>
.wrapper {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.box {
width: 22%;
background-color: red;
margin: 0 0 15px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<h4>Box 1</h4>
</div>
<!-- end box 1 -->
<div class="box">
<h4>Box 2</h4>
</div>
<!-- end box 2 -->
<div class="box">
<h4>Box 3</h4>
</div>
<!-- end box 3 -->
<div class="box">
<h4>Box 4</h4>
</div>
<!-- end box 4 -->
<div class="box">
<h4>Box 5</h4>
</div>
<!-- end box 5 -->
<div class="box">
<h4>Box 6</h4>
</div>
<!-- end box 6 -->
<div class="box">
<h4>Box 7</h4>
</div>
<!-- end box 7 -->
</div>
<!-- end wrapper -->
</body>
</html>
Whereas grid does what I want but it comes at the expense of having to name areas. Im sure there must be a more economical coding approach when use css grid to create a perfect grid. Plus it would'nt be any use for dynamically generated content, I mean I could increment the box coding using php but the css........no
<meta charset="UTF-8">
<title>Flex Evenly</title>
<style>
.wrapper {
display: grid;
grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
grid-template-rows: auto;
grid-column-gap: 2%;
grid-row-gap: 20px;
grid-template-areas:
"box_1 box_2 box_3 box_4"
"box_5 box_6 box_7 .";
width: 90%;
margin: 0 auto;
}
.box {
background-color: red;
margin: 0 0 15px 0;
text-align: center;
}
.box_1 {
grid-area: box_1;
}
.box_2 {
grid-area: box_2;
}
.box_3 {
grid-area: box_3;
}
.box_4 {
grid-area: box_4;
}
.box_5 {
grid-area: box_5;
}
.box_6 {
grid-area: box_6;
}
.box_7 {
grid-area: box_7;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box_1">
<h4>Box 1</h4>
</div>
<!-- end box 1 -->
<div class="box box_2">
<h4>Box 2</h4>
</div>
<!-- end box 2 -->
<div class="box box_3">
<h4>Box 3</h4>
</div>
<!-- end box 3 -->
<div class="box box_4">
<h4>Box 4</h4>
</div>
<!-- end box 4 -->
<div class="box box_5">
<h4>Box 5</h4>
</div>
<!-- end box 5 -->
<div class="box box_6">
<h4>Box 6</h4>
</div>
<!-- end box 6 -->
<div class="box box_7">
<h4>Box 7</h4>
</div>
<!-- end box 7 -->
</div>
<!-- end wrapper -->
</body>
</html>
Actually I could just use the 1fr unit - PERFECT. Then no named area rubbish needs to be applied - PERFECT. css grid can do the most simplest of thing which flexbox cant
.wrapper {
display: grid;
grid-template-columns: 1fr, 1fr, 1fr, 1fr;
grid-template-rows: auto;
grid-column-gap: 2%;
grid-row-gap: 20px;
grid-template-areas:
"box_1 box_2 box_3 box_4"
"box_5 box_6 box_7 .";
width: 90%;
margin: 0 auto;
}
Wait its still rubbish. Whilst Ive gotten rid of the extra css named area I still have the below which is no good for producing dynamic content....hummmmmm
grid-template-areas:
"box_1 box_2 box_3 box_4"
"box_5 box_6 box_7 .";
EDITED:
This meanwhile is perfection!!
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
grid-gap: 20px;
}
Codepen comes in pretty handy at times.
Then you can use media queries to restructure the grid - super!
@media screen and (max-width: 768px) {
.wrapper {
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}
}
pziecina wrote
Both flexbox and grids are being updated to support the properties in the css3 box alignment specs, which is introducing better, (or so the discussions in the csswg tell us) and more consistent results for both.
It may be worth checking it out -
I'll be dead by the time that is stable to use. I'm not looking long-term any longer this is very short-term so I need solutions I can use within the next 2 years. After that I wont be doing this is any serious manner - hopefully by that time Wappler would have improved its code environment so I can join the has-beens
AdChoices