Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.grid-container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 100px); gap: 10px; }
.item1 { grid-row: 1 / span 2; background-color: lightblue; }
.item2 { background-color: lightcoral; }
.item3 { background-color: lightgreen; }
.item4 { background-color: lightgoldenrodyellow; }
.item5 { background-color: lightpink; }The 'grid-row-end' property in CSS is used to specify where a grid item should end on the grid rows. It can take a line number or a named grid line, allowing for precise control over the layout of grid items within a grid container.
.grid-container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(2, 150px); gap: 10px; }
.item1 { background-color: lightblue; grid-row: 1 / 3; /* Spans from row 1 to row 3 */ }
.item2 { background-color: lightgreen; }
.item3 { background-color: lightcoral; }
.item4 { background-color: lightgoldenrodyellow; }The 'grid-row' property in CSS is used to specify how many rows a grid item should span within a grid layout. It can define the start and end positions of the item in the grid, allowing for complex layouts by controlling the vertical placement of elements.
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px; }
.grid-item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border-radius: 5px; }The 'grid-gap' property in CSS is used to define the space between grid items in a grid layout. It can be set for both rows and columns, allowing for consistent spacing that enhances the visual structure of the grid. This property is particularly useful for creating responsive designs where spacing needs to adapt without affecting the overall layout.
.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.