Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.grid-container { display: grid; grid-template: 100px 200px / 1fr 2fr; gap: 10px; }
.grid-container > .item1, .grid-container > .item2, .grid-container > .item3, .grid-container > .item4 { background-color: lightblue; border: 1px solid blue; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.item1 { background-color: lightcoral; } .item2 { background-color: lightgreen; } .item3 { background-color: lightgoldenrodyellow; } .item4 { background-color: lightpink; }The 'grid-template' property in CSS is used to define the structure of a grid layout by specifying the number and size of rows and columns. It allows developers to create complex layouts with ease, enabling responsive design and better control over the placement of elements within a grid container.
.grid-container { display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 100px); gap: 10px; }
.item1 { background-color: lightblue; grid-row-start: 1; grid-column-start: 1; }
.item2 { background-color: lightcoral; grid-row-start: 2; grid-column-start: 1; }
.item3 { background-color: lightgreen; grid-row-start: 3; grid-column-start: 1; }
.item4 { background-color: lightgoldenrodyellow; grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; }The 'grid-row-start' property in CSS defines the line where a grid item begins within a grid layout. It allows for precise placement of items in a grid by specifying the row line number, enabling complex layouts and control over item positioning.
.grid-container { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 20px; column-gap: 10px; background-color: #f0f0f0; padding: 10px; }
.grid-item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border: 1px solid #ddd; }The 'grid-row-gap' property in CSS is used to specify the size of the gap between rows in a grid layout. This property allows for better spacing and alignment of grid items, making the layout more visually appealing. It can be applied to any grid container to enhance the overall design and organization of the content.
.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.