Search⌘ K
AI Features
Home
Courses
Learn HTML, CSS, and JavaScript

Advanced Grid Layout Techniques

Explore advanced CSS Grid techniques to create responsive, flexible layouts. Learn how to use minmax and repeat functions for grid sizing and apply alignment properties for precise control over grid items and content placement on different screen sizes.

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

...