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; padding: 10px; }
.grid-item { background-color: lightblue; border: 2px solid #333; text-align: center; padding: 20px; font-size: 24px; }The CSS Grid Layout is a powerful layout system that allows you to create complex web layouts using a grid-based approach. It enables you to define rows and columns, and then place items within that grid, providing great control over the design and responsiveness of your layout.
.container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; background-color: #f0f0f0; }
.item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border-radius: 5px; }The 'gap' property in CSS is used to define the spacing between items in a grid or flex container. It allows for more control over the layout by setting the space between rows and columns without needing to add margins to individual items. This property enhances the visual arrangement of elements, making it easier to create clean and organized layouts.
.container { text-align: center; margin-top: 50px; }
.normal { font-weight: normal; font-size: 24px; }
.bold { font-weight: bold; font-size: 24px; }
.bolder { font-weight: bolder; font-size: 24px; }The 'font-weight' property in CSS is used to define the thickness or boldness of the text. It allows you to specify different levels of boldness, ranging from normal (400) to bold (700) and even bolder weights, depending on the font family used. This property is essential for creating emphasis and visual hierarchy in text content.
.example { font-variant-position: super; }The 'font-variant-position' CSS property controls the alignment of the small-caps and normal text at the same baseline. It allows you to specify whether the small-caps glyphs should sit on the normal baseline or be aligned to the caps height.
.numeric-example { font-variant-numeric: lining-nums; }The 'font-variant-numeric' CSS property allows you to control the numerical formatting of text, such as enabling or disabling the use of lining and old-style numerals.