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); gap: 10px; }
.item1 { background-color: lightblue; grid-column: 1 / 3; /* Spans from column 1 to column 3 */ }
.item2 { background-color: lightgreen; }
.item3 { background-color: lightcoral; }
.item4 { background-color: lightgoldenrodyellow; }
.item5 { background-color: lightpink; }The 'grid-column' property in CSS is used to specify how many columns an element should span within a grid layout. It allows for precise control over the placement of grid items, enabling complex and responsive designs. By defining the start and end columns, developers can create visually appealing arrangements of content.
.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.