Does Grid make my web slow?

Hi.

I was thinking about how to layout my web and I decided to grid the whole body with 12 columns and add rows as needed. However, how do I know wheter there is to much squares in my grid so the web would be slow.

How can I measure the time it takes to load my web locally or using Live Server in VScode.

Thanks!!

From this source: Grid by Example

It says that:

One of the most common questions I get when talking about Grid is about whether this is a competing specification to Flexbox, and when should you use one or the other (assuming that there was browser support equally for both). I usually defer to this email from Tab Atkins on the www-style list.

Flexbox is for one-dimensional layouts - anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together). Grid is for two-dimensional layouts. It can be used as a low-powered flexbox substitute (we’re trying to make sure that a single-column/row grid acts very similar to a flexbox), but that’s not using its full power.

If you only need to define a layout as a row or a column, and you would like the flexibility to respond to the content of that row then you probably want flexbox. If you want to define a grid and fit content into it in two dimensions - you need grid.

Hopefully that helps! In regards to performancing, I think you can use Chrome devtools, go to “network” and see a bunch of stats on your page

2 Likes