Question about grid

HTML-CSS
1 
#collections{
    display: block;
    text-align: center;
    background-color: aqua;
    height: fit-content;
   }
   .icon-border{
    display: inline-block;
    margin-left: 30px;
    border: 1px solid black;
    width: 150px;
    aspect-ratio: 1/1;
    height: 150px;
    border-radius: 100%;
   }

my original plan was to use grid but wasnt changing the column and row when i make the tab smaller but when i switched to block and inline block to did what i wanted it to do which was switching columns like went in a straight row and when it got smaller it went 3/1 2/2 and went it got small enough it was just one column.

Im just curious if i didnt use grid correctly or whats the point if i can just use block, im just confused bc i was frustrated and just simply fixed it at ltleast to me with block and inline block

2

Grid is really great for placing elements exactly where you want them on a page, even when its resized.
Its also an easy way to overlap elements.

If you want to have items on the page ‘wrap’ when you change the page size, grid may not be the easiest approach.

(Not knowing much about your project its hard to say which method would be the best approach.
However its good to keep in mind that both can be used together.
For example, if you have one grid cell using a fraction width, with 10 elements that need to wrap, those elements could use display: inline-block if you wanted them to)

Here is some documentation for curiosity:
display - CSS: Cascading Style Sheets | MDN (mozilla.org)

3

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