Familiarize Yourself With Sizing In CSS Layouts

In the world of web design, CSS layouts make use of style sheets to define the placement of elements on one’s website. It typically replaces tables, which are one of the most popular methods of placing page elements. There is currently a misconception that CSS layouts are unable to produce complex page layouts. Hence, it is time to clear the air by familiarizing yourself with sizing in CSS layouts. Let’s find out more!

Percentages

You do not always need to stick with length units for sizing matters. It is possible to use a percentage as the next best alternative. Keep in mind that percentages will need to be calculated in relation to something. This means it should be calculated in the same way that a relative length unit is resolved. When you see <length-percentage> in a specification, the percentage is usually resolved to a length before being utilized.

Auto-sized Tracks

As implicit grid tracks are created with auto sizing, it is pertinent that you understand what auto means when used for track sizing. Auto has a specific meaning in specifications. In the case of flexbox and Grid, if you utilize auto as the value of flex-basis or for a track size, it will look around to check if there is any item in that track for Grid or any size on the item. It will then utilize that size as the value of flex-basis or as the base track size.

Length Units

Length units are usually described in CSS Units and Values module specification. If <length> is as an allowed value for a CSS property, it is usually a distance and consists of an integer and unit identifier. 2em or 11px are examples of the aforementioned. Length units can be split into absolute and relative lengths. Relative lengths take sizes relative to some other thing. If an element is defined using a relative length, the final size may be different. Here is a quick look at some of the common relative units:

• vmin
• vw
• ch
• em
• ex
• rem
• vh
• vmax

Absolute units, on the other hand, map to physical dimensions. They do not scale relative to other things on a user’s screen. Since the output environment is known, they are the most useful length units. The allowed absolute units in CSS include:

• pt
• in
• mm
• cm
• Q mm
• Q
• pc
• px

fr Units

The fr unit or <flex> is a flexible length that represents a fraction of leftover space in a grid container. It only applies to grid layout and is often detailed in the grid specification. Do note that it is not always detailed in any of the modules relating to sizing.

Minmax

While fr units have the ability to create large tracks, you should look at the minmax() function if you want to control the way tracks behave. Minmax is very useful when it comes to sizing rows as well as to prevent an empty row from collapsing down to zero height. The function also allows rows to grow to a size that can accommodate any content that is added.

Content-Based Sizing

CSS Grid Layout can be used to size grid tracks. It has a two-dimensional layout model and allows content to dictate track sizing on the grid. Oftentimes, the size of a track is based on the widest thing in the track, especially if you are asking a column track to become min-content sized. Fit-content refers to something taking a percentage or length as a value. When you use this for track sizing, the track will act like max-content and stop growing once it hits the intended size. The content will wrap as a result.