CSS
Defining Custom Grid Track Sizes with `fr` and Absolute Units
Learn to precisely define grid column and row sizes using a mix of `fr` (fractional) units, `px`, and `auto` for highly customizable and responsive CSS Grid layouts.
.grid-container {
display: grid;
/* Example columns: Fixed 200px, 1 fraction of remaining space, fixed 50px, auto-sized */
grid-template-columns: 200px 1fr 50px auto;
/* Example rows: Auto-sized, 1 fraction of remaining space, fixed 100px */
grid-template-rows: auto 1fr 100px;
gap: 15px;
height: 400px; /* Example height for row sizing demonstration */
width: 90%;
margin: 20px auto;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
.grid-item {
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ddd;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
How it works: This CSS Grid example illustrates how to define custom track sizes using a combination of absolute units (like `px`), `auto` (which sizes to content), and `fr` (fractional) units. `fr` units divide the *remaining* available space proportionally, creating fluid and adaptable columns or rows, while `px` units maintain fixed dimensions, and `auto` adjusts based on content. This granular control over `grid-template-columns` and `grid-template-rows` allows developers to build complex and responsive grid structures without needing to explicitly place or span individual items.