Menu
flexbox like this:
display: flex;
flex-flow: row wrap;
and grid like this:
display: grid;
grid-template-columns: repeat(auto-fill, 20px);
dynamically arrange items, and the counts of rows and columns are not fixed.
I'm not sure it's one problem or two, as there may be different solutions for flexbox and grid. For now I ask in a time anyway.
How can I get the count of rows and columns? And further get item by row index and column index?
See https://jsfiddle.net/w2L8oumw/16/ as an example. Drag the frame border to make the width of the result window change, such that counts of rows and columns change, too.
My idea is to iterate all items and decide their row index and column index according to their position, on initializing, item changing and resizing.
923
With a grid geometry manager, you can set a certain number of rows and columns and place the widget in any location of the application. To set a certain number of rows and columns, you'll need to specify the size value of the row and column configuration that helps to set the location of a particular widget.
What does 1fr mean in the following code? grid-template-columns: 150px 150px 1fr 1fr; The first two columns will be two fraction units of the stated width. The third and fourth columns is 1 fraction unit of the remaining space in the grid.
To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value can be either in pixels( px ) or percentages(%).
int getRows(): Similar to getColumns() method, we can use it to get the number of rows present in the grid layout.
The questions is al little bit older but in case anybody needs this:
If you are working with CSS-Grid you don't need so much calculation. You can get the current template settings e.g. with
getComputedStyle(container).getPropertyValue("grid-template-rows")
in modern Browsers this returns the actual values, not the values from your css, so you get a string like
250px 250px 250px
you can than calculate the current number of rows by splitting the string and counting the elements in the resulting array.
This might work in older IEs as well, I did not test it.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
