Once the size of each grid area is thus established, the grid items are laid out into their respective containing blocks.
The latter will get a scrollbar when its content exceeded the defined height. To overcome this, I will consider a CSS grid configuration where I don't need any explicit height.īelow, the left column is defining the size of the right one. This one is a bit tricky since the usage or percentage height is not trivial (we all know the prophecy that says: "the parent needs to have an explicit height defined") This time we will rely on height:0 min-height:100%. We can extend the same logic to a column configuration to have one column defining the height of another one. There is no restriction and any kind of element (even one with complex content) can be considered for this trick. The title defines the width of a paragraph
It can work with any kind of configuration where we want an element A to define the width of an element B This trick is not only limited to image + title. In all the above examples, the image will dictate the width of the title. Yes, it's a bit crazy or let's say magic 😉 We add min-width: 100% to resize our title and make its width equal to the container width (the one defined previously with the image!). Our container will have its width defined only by the image. We make our title have a width equal to 0 so it will not contribute to the container width.I used inline-block but it can be a float element, a table one, a flex item, etc. We make the container (the box element) a shrink-to-fit element (its width is defined by its content).Enter fullscreen mode Exit fullscreen mode
0 kommentar(er)
