Learn HTML, CSS, and JavaScript/

...

/

Advanced Grid Layout Techniques

Advanced Grid Layout Techniques

Learn advanced CSS Grid techniques to optimize layouts and align content efficiently.

We'll cover the following...

Building upon our foundational knowledge, we’ll now explore advanced techniques in CSS Grid. We’ll learn how to size grid tracks using functions like minmax(), utilize the repeat() function for efficient code, and align and justify both items and content within the grid.

Sizing grid tracks with minmax()

The minmax() function allows us to specify a minimum and maximum size for grid tracks, providing flexibility in responsive designs.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 10px;
}
.grid-item {
  background-color: #e0e0e0;
  padding: 20px;
  text-align: center;
}
Sizing grid tracks

Line 3 in the above code creates three columns where each column is at least 100px wide but can grow to fill available space (1fr).

Simplifying code with the repeat() function

The repeat() function helps us define repetitive track patterns concisely.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
Using repeat function for track patterns
...