Issue
I am trying to build grid where some cells have elements combining shape-outside with some phrasing content. The shape is triangular (for simplicity), responsively filling half the cell.
My problem is that the phrasing content overflows the cell (and the grid) and my attempts at fitting the cell and grid break the shape-outside
.grid {
display: grid;
border: 1px solid red; /* to show overflow */
grid-template-columns: 1fr;
grid-template-rows: auto;
width: 600px; /* meant to be responsive but this width should show overflow occurring */
}
.cell {
grid-column-start: 1;
height: 100%;
border: 1px solid blue; /* to show overflow */
}
.shape-outside {
shape-outside: polygon(0 0, 100% 0, 0 100%);
clip-path: polygon(0 0, 100% 0, 0 100%);
background-color: lightblue;
width: 100%;
height: 100%;
float: left;
}
<div class="grid">
<div class="cell">
<div class="shape-outside">
</div>
<div>Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.
</div>
</div>
</div>
In the example I've set a fixed width to show the problem - in reality, I want 100%.
Solution
As far as I am aware too, the only way to do this exactly is programmatically, eg, using javascript.
However, if you are okay with an approximation, that mostly works, then the code below uses only CSS and HTML.
The underlying problem is that the floated element does not contribute to the layout flow, ie, it does not contribute to the size of its parent. This means that the other element, the text, is used by the browser to determine the size of the parent, but it does this BEFORE it gets wrapped around the float, so its apparent height is what a plain block of text would require. In your case, a right triangle, this means that the height is only half of what it should be.
The code below uses a hack to get around this by using a dummy set of the same text but with less than half the width, which means it will approximately result in a height double of what it would be otherwise. The dummy is then hidden from view. The dummy is then "covered" by the real text by placing the real text and float in a wrapper, content, which is positioned absolutely at 0 0, which is where the layout flow of the dummy has positioned the dummy.
The dummy sets the height, which sets the height of its parent, cell. The other child, content, can then set its height to 100% of the parent, which is the double height, and then the float and shape-outside can set their heights to 100% of that.
To contain the float and real text properly, their parent's, ie, content's, display needs to be set to flow-root to start a new flow control block, otherwise the float literally floats off into other places.
You may wish to play with the width in dummy to get the best value for your need, and also consider calc( nn% +- nnpx ) for example. Other fine tuning might include using box-size: border-box, other wise 100% does not mean 100%, etc.
.grid {
display: grid;
border: 1px solid red;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto);
}
.cell {
grid-column-start: 1;
border: 1px solid blue;
position: relative;
}
.content {
display: flow-root;
position: absolute;
height: 100%;
}
.shape-outside {
shape-outside: polygon(0 0, 100% 0, 0 100%);
clip-path: polygon(0 0, 100% 0, 0 100%);
background-color: lightblue;
width: 100%;
height: 100%;
float: left;
}
.dummy {
visibility: hidden;
width: 40%;
}
<div class="grid">
<div class="cell">
<div class="content">
<div class="shape-outside"></div>
<div>Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
</div>
<div class="dummy">
Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
</div>
<div class="cell">
<div class="content">
<div class="shape-outside"></div>
<div>Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
</div>
<div class="dummy">Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
</div>
<div class="cell">
<div class="content">
<div class="shape-outside"></div>
<div>Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
</div>
<div class="dummy">Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
</div>
</div>
Text after the grid.
Answered By - petern0691
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.