Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the aspect ratio skills of CSS grid projects". The explanation in this article is simple and clear and easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the aspect ratio skills of CSS grid projects"?

Case 1) it's just that the internal elements need to set the aspect ratio.

Well, this might be easier. Just make sure that the width of the element is 100% the same as the width of the mesh area, and then add pseudo elements to deal with the aspect ratio of the stretch height.

Grid > * {background: orange; width: 100%;}. Grid > [background ^ ='- aspect-ratio']:: before {content: "; display: inline-block; width: 1px; height: 0; padding-bottom: calc (100% / (var (--aspect-ratio);}

Note that the aspect ratio does not have to be applied through custom attributes. As you can see, the dirty work here is done by the padding-bottom rule, which can also be used directly with a fixed value or something.

Case 2) width across columns

I think what you want is more likely to be the effect of setting an aspect ratio of 2:1 so that the element can actually span two columns instead of being confined to one column. The practice is similar to the above, but rules should be added to achieve cross-column.

[style= "--aspect-ratio: 1aspect-ratio 1;"] {grid-column: span 1;} [style= "--aspect-ratio: 2 span 1;"] {grid-column: span 2;} [style= "--aspect-ratio: 3 aspect-ratio 1;"] {grid-column: span 3;}

If we add a grid-auto-flow: dense; rule, we can also make different grid projects have different aspect ratios, and they can neatly surround each other and appear to be in harmony.

At this point, it's time to talk about what will screw up the accurate aspect ratio. The line height line-height attribute of some text may push the box too high; using the grid spacing grid-gap attribute may also confuse the aspect ratio. If the aspect ratio must be over-accurate, you may have to try a few more fixed values to try your luck.

If the grid itself does not have a fixed number of rows, it can be cumbersome to span columns. What you may do is to repeat the function repeat plus automatically fill the effect of auto-fill, so the final situation may be that several columns are not equal, then their aspect ratio is not much better. Maybe we'll take a closer look at this problem next time.

Case 3) do it by force

The grid has the ability to make a two-dimensional layout. If you really want to do it, just force the height and width of the grid area to match the aspect ratio. For example, it is not impossible to directly set fixed values for columns and rows:

.grid {display: grid; grid-template-columns: 200px 100px 100px; grid-template-rows: 100px 200px 300px;}

We generally do not consider this approach because we all want elements to be flexible in size, and it is for this reason that the techniques used in the aspect ratio examples above are percentage-based. But a fixed value is still another option.

Take a look at the example of filling the aspect ratio box on the Pen website CodePen, author Chris Coyier.

This example forces the size of the grid area to be fixed, and then lets the elements stretch to fill the area, but we can also fix the size of the elements.

Part of the problem is not only to add an aspect ratio to the box, but also to achieve alignment within the box. There are several ways to do this, but I think the easiest way is to surround the grid. Add the display: grid; rule to the grid element, and then use the alignment function of that internal grid to implement it.

Thank you for your reading, the above is the content of "what are the aspect ratio skills of CSS grid projects?" after the study of this article, I believe you have a deeper understanding of the aspect ratio skills of CSS grid projects, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.