Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; }
.grid-item { background-color: lightblue; padding: 20px; text-align: center; }
.item2 { grid-column-start: 2; grid-column-end: 4; }
.item3 { grid-column-start: 1; grid-column-end: 3; }The 'grid-column-start' property in CSS is used to specify the starting position of a grid item within a grid layout. It defines which column line the item should start at, allowing for precise control over the placement of items in a grid container.
.grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; background-color: #f0f0f0; padding: 10px; }
.grid-item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border: 1px solid #ddd; }The 'grid-column-gap' property in CSS is used to specify the size of the gap (or space) between columns in a CSS Grid layout. This property enhances the visual separation between grid items, making layouts more organized and aesthetically pleasing.
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.item1 { background-color: lightcoral; grid-column-end: span 2; }
.item2 { background-color: lightblue; }
.item3 { background-color: lightgreen; }
.item4 { background-color: lightgoldenrodyellow; grid-column-end: span 1; }The 'grid-column-end' property in CSS Grid Layout specifies the line where a grid item ends within a grid container. It allows you to control how many columns an item spans, providing flexibility in layout design. By using this property, you can create complex and responsive grid structures easily.
.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.