Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; gap: 10px; }
.grid-item { background-color: lightblue; border: 1px solid blue; display: flex; align-items: center; justify-content: center; font-size: 20px; }The 'grid-auto-rows' CSS property specifies the size of rows in a grid container when the rows are created automatically. This property allows you to define a consistent height for any rows that are added to the grid, ensuring a uniform layout. It can take various units, such as pixels or fractions, enabling flexible design options.
.grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-auto-flow: column; gap: 10px; }
.grid-item { background-color: lightblue; border: 2px solid blue; padding: 20px; text-align: center; font-size: 20px; }The 'grid-auto-flow' property in CSS controls how the auto-placement algorithm of a grid layout works. It determines the placement of items in a grid when they do not have a specified position, allowing for different flow patterns like row or column-based arrangements. This property is particularly useful for creating responsive designs that adapt to varying content sizes.
.grid-container { display: grid; grid-template-columns: repeat(2, 100px); grid-auto-columns: 150px; grid-auto-flow: column; grid-gap: 10px; background-color: #f0f0f0; padding: 10px; }
.grid-item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border: 1px solid #333; }The 'grid-auto-columns' property in CSS defines the size of columns in a grid layout that are created implicitly. This property is particularly useful when you have a grid that does not explicitly define the number of columns, allowing you to control the width of additional columns that are automatically generated based on the content.
.grid-container { display: grid; grid-template-areas: 'header header' 'main sidebar' 'footer footer'; grid-template-rows: 100px 1fr 50px; grid-template-columns: 1fr 250px; height: 100vh; }
.header { grid-area: header; background-color: #4CAF50; color: white; text-align: center; padding: 20px; }
.main { grid-area: main; background-color: #2196F3; color: white; text-align: center; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #FF9800; color: white; text-align: center; padding: 20px; }
.footer { grid-area: footer; background-color: #f44336; color: white; text-align: center; padding: 20px; }The 'grid-area' property in CSS is used to specify a grid item's size and location within a grid layout. It can define both the row and column start and end positions, allowing for precise placement of elements in a grid container. This property is particularly useful for creating complex layouts with minimal code.
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; }
.grid-item { background-color: lightblue; border: 2px solid #333; text-align: center; padding: 20px; font-size: 24px; }The CSS Grid Layout is a powerful layout system that allows you to create complex web layouts using a grid-based approach. It enables you to define rows and columns, and then place items within that grid, providing great control over the design and responsiveness of your layout.