Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container { display: grid; grid-template-columns: repeat(3, 1fr); height: 100vh; } .item { background-color: lightblue; border: 2px solid blue; padding: 20px; text-align: center; } .item:nth-child(1) { place-self: center; } .item:nth-child(2) { place-self: start; } .item:nth-child(3) { place-self: end; }The 'place-self' property in CSS is a shorthand for setting both 'align-self' and 'justify-self' properties in a grid or flex container. It allows you to control the alignment of a grid item or flex item along both the block (vertical) and inline (horizontal) axes. This property is particularly useful for centering items or adjusting their position within the grid or flex layout.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(2, 100px);
place-items: center;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}
.grid-item {
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
border-radius: 5px;
}The 'place-items' CSS property is a shorthand for setting both 'align-items' and 'justify-items' in a grid or flex container. It allows you to control the alignment of items within the container along both the block and inline axes. This property simplifies the alignment process, making it easier to achieve a balanced layout.
.container { display: grid; grid-template-columns: repeat(2, 100px); height: 200px; place-content: center; background-color: lightgray; } .item { background-color: coral; padding: 20px; text-align: center; border: 2px solid darkorange; }The 'place-content' CSS property is a shorthand for setting both 'align-content' and 'justify-content' in a grid or flex container. It helps control the alignment of the content within the container, allowing for efficient spacing and positioning of items along both axes. This property is particularly useful in responsive designs where content needs to be centered or spaced evenly.
.scene { width: 200px; height: 200px; perspective: 500px; perspective-origin: 50% 50%; }
.box { width: 100px; height: 100px; background: coral; transform: rotateY(45deg); }The 'perspective-origin' property in CSS defines the origin point for the perspective effect on 3D transformed elements. It allows you to control the vanishing point of the 3D space, giving depth and dimension to elements, which can create visually engaging layouts and effects.
.perspective-container { width: 200px; height: 200px; perspective: 500px; margin: 50px auto; } .cube { width: 100px; height: 100px; background: linear-gradient(45deg, #f06, #4a90e2); transform: rotateY(45deg) translateZ(50px); transform-style: preserve-3d; animation: rotate 5s infinite linear; } @keyframes rotate { from { transform: rotateY(0) translateZ(50px); } to { transform: rotateY(360deg) translateZ(50px); } }The 'perspective' property in CSS is used to give a 3D space effect to elements. It defines how far the object is from the viewer, which affects the scale and distortion of the element as it is transformed in 3D space. A lower value creates a more pronounced 3D effect, while a higher value results in a flatter appearance.