CSS grid problem, using 1fr will make the content extend itself too much

HTML & CSS
22

Stack overflow is old. And the knowledge on what are the issues with tables has accumulated on that page.

Still a few issues mentioned in that article that also apply to display: tables. Like no support for ie8.

23

Supporting IE8 is old.
Though IE8 does support display table. You have to go back as far as IE7 to lose support for it.

But you seem to have turned this on its head. Using lack of support in IE8 (which isnā€™t true) as an argument against using something, in favour of something that isnā€™t supported in any version of IE. This isnā€™t making much sense at all. :upside_down:

No one is saying you must use display table, it was just another option in how to achieve your goal.
And be assured there is nothing wrong with using display table where it fits the bill for a particular layout. If @PaulOB says itā€™s alright, it can generally be considered a safe bet.

You seem to be confusing it with with the very bad and outdated practice of using actual tables for layout, which I agree should not be used.

3 Likes
24

As Sam said display:table is fully supported in IE8 and has very few issues. The only issue with the display table properties is that people donā€™t know how to use them properly. They are an incredibly robust layout tool more so than many current techniques because there dynamics have been created and understood for many years.

Yes I think you have got the wrong end of the stick here so let me put you right :slight_smile:

  • Html tables when used for layout is bad.

  • Html tables when used for data is good.

  • CSS display:table when used to display data is bad.

  • Css display table used for non data layout is good.

Grid and flexs are not mutually exclusive. It is intended that you will be using flexbox and other methods inside your grid. The grid creates the structure but the inner workings of the grid can be any layout mechanism suitable. It is unlikely that you want to nest more grids inside other grids although this is indeed possible.

Grid and flexbox will both suffer the same performance issues because they have to work out where everything goes first as their structure will often depend on what space is left after content has been inserted.

For simple layouts there would be no point in using grid or flex as there are other easier methods although of course you are free to use what you think best. In the end it does become a matter of personal preference but I tend to use whatever gets the job done in the simplest way as that is usually the best approach.

6 Likes
25

Only the approved CSS spec gives me the truth. How good is display: table for layout is hard to determine when the stack overflow says (with votes only to support it) ie8 does not support table alignment but here you say it does support it. Anyways, ie8 is extremely old now so it is a non issue and a bad example. I have no idea how good is display: table for layout. I never used it for layout only for data tables without much layout. I thought I had done a project with table for layout but no there was a large tree of divs with lots of classes, and the distances in % did not add up which made the look bad. At least the grid is slightly better, the proportions are well defined.

Yes some articles recommend to use both flex and CSS grids. As regards performance, it is mainly rumors. ANd the performance problem in question is only for slow connection (which does apply to mobiles). When bootstrap migrated to use flex, many rumors spread to say flex has performance problems :slight_smile:

Nesting grids inside grids may be simpler at a zoom level. But in my experience, there are 2 problems.

  1. The alignments and margins tend to have copies at many places on the page in different grids. Not a big issue and it can be a variable name that is reused. But still it is present at several places. With only one grid intead of nexted grids, they are more grouped.
  2. A new grid needs a parent and a child. So either you reuse divs used to group other things but the mixing may add confusion, or you have to create new divs. It is a fundamental principle in the SASS book I mentioned above to minimize the number of DOM elements needed for the layout.
26

This is a myth. The performance concerns over grid and flex have nothing to do with bandwidth, itā€™s al just css code flowing through the net the same.
Transmitting: display: block isnā€™t any faster than transmitting display: flex over the net.
The alleged performance concerns are about the client side processing and rendering within the browser.

Itā€™s not a case of one layout method is superior to the next. As this topic shows, there is often a multitude of different ways to create the same or similar layouts,and there is not always a definitive answer to which is the best. There are differing pros and cons to each to be weighed up, be that in performance, the required complexity of mark-up, browser support, etcā€¦

Also you canā€™t always make blanket judgements to one method is always better than another. In the many and varied layouts you can imagine, in some method (a) is hands-down the best way to do it. But in another scenario, method (b) is by far the best. So you canā€™t just write off one method just because it hasnā€™t worked for you in one particular case. Each method has its use cases.

4 Likes
27

Yes.But the progressive rendering that causes the performance is more likely to have issues on a slow connection. Well that is what Iremember from what I read. It is just hypothetical. MAybe their benchmark was wrong. flex changes every year so it may not be valid any more.

Just search over the internet. THere are plenty of contradicitng articles.

28

the performance issues reported with flex have to do with 3 things:

Note that the sources may do wrong benchmarks. And flexbox in browsers is improved all the time. I use flex myself all the time but for simple things.

Yes all technologies can be more or less suited depending on the context.

COMPASS:
I was really impressed by compass susy. With a clean SASS API, it generates a very compatible grid based on basic properties like float, height. Too bad that compass suddenly became deprecated. Does anyone know why compass became deprecated? Is it an old technology?

29

I followed this best practice at the first link below of using both CSS grid and flex. The grid is used for the page in 2 dimensions, and flex is used for small details.I find the result quite awesome.

https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf

The grid in 2 dimensions reduces the need to have many margins at many places, or to have nested grids. All the layout for the page is at once place. And one can make a grid in many ways. My favorite way is with named areas.

Here is how it looks like with named areas:

grid-template-areas: \
'...     page-area-search-form                   ...                          ...' \
'...     page-area-search-results                page-area-search-results     ...' \
'...     page-area-search-results-pagination     ...                          ...';

and the dimensions are set using grid-template-rows and -columns.

flex is used for small details. flex-wrap avoids the need to create rows, and makes the layout CSS very tiny. Changing the flex-direction allows to avoid the need of wrapper divs. A grid inside a grid tends to add more divs for layout. Or if existing divs are reused it may add a confusion to mix other style with a grid because a grid needs a parent and a child and the child specifies where it lies in the grid. With flex, there is no need of additional divs, and the children are less verbose to indicate their location in the grid.

It is the book ā€œMastering SASS, Luke Watts, p96ā€ that says one should minimize the amount of DOM elements used for layout. DOM elements should not be linked to layout.

30

The example Paul gave with a header with padding and with a .main with flex, can it work with a footer? How?

31

By adding a footer at the end.

</main>
<footer>
  Footer Text
</footer>

header, footer {
	background:green;
	padding:10px;
}
32

Thanks!

I tried in the code pen above (adding an element footer and the css), and the left alignment is wrong.

Is it an interference with flexbox?
Or is it because the footer behaves dirrently?
How to fix the alignment problem?

33

ā€œWrongā€ in what way? It behaves as I would expect it to.

3 Likes
34

Yes, hereā€™s the same in a codepen:

3 Likes
35

I was wrong. It works. Excuse me that I was too fast and polluted this forum.

I had the footer at the wrong place.

      <footer>test</footer>
</main>
3 Likes
36

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.