Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.grid-container { display: grid; grid-template-columns: repeat(2, 100px); grid-auto-columns: 150px; grid-auto-flow: column; grid-gap: 10px; background-color: #f0f0f0; padding: 10px; }
.grid-item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border: 1px solid #333; }The 'grid-auto-columns' property in CSS defines the size of columns in a grid layout that are created implicitly. This property is particularly useful when you have a grid that does not explicitly define the number of columns, allowing you to control the width of additional columns that are automatically generated based on the content.
.grid-container { display: grid; grid-template-areas: 'header header' 'main sidebar' 'footer footer'; grid-template-rows: 100px 1fr 50px; grid-template-columns: 1fr 250px; height: 100vh; }
.header { grid-area: header; background-color: #4CAF50; color: white; text-align: center; padding: 20px; }
.main { grid-area: main; background-color: #2196F3; color: white; text-align: center; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #FF9800; color: white; text-align: center; padding: 20px; }
.footer { grid-area: footer; background-color: #f44336; color: white; text-align: center; padding: 20px; }The 'grid-area' property in CSS is used to specify a grid item's size and location within a grid layout. It can define both the row and column start and end positions, allowing for precise placement of elements in a grid container. This property is particularly useful for creating complex layouts with minimal code.
.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.