CSS Online Editor - Free , Simple & Easy
Thinkforu.org CSS Editor
Write, preview, and learn CSS in real-time
CSS Code
Live Preview
Sample Content
This is a preview of your CSS styles.
CSS Cheat Sheet
Flexbox
display: flex; - Enable flexbox
justify-content: center; - Horizontal alignment
align-items: center; - Vertical alignment
flex-direction: column; - Stack items vertically
gap: 1rem; - Space between items
Grid
display: grid; - Enable grid
grid-template-columns: repeat(3, 1fr); - 3 equal columns
gap: 1rem; - Grid gap
grid-column: span 2; - Span 2 columns
Animations
@keyframes name { } - Define animation
animation: name 2s ease; - Apply animation
transition: all 0.3s; - Smooth transition
Responsive Design
@media (max-width: 768px) { } - Tablet breakpoint
@media (max-width: 480px) { } - Mobile breakpoint
Frequently Asked Questions
How do I make my design responsive?
Use media queries to create responsive designs. Start with mobile-first approach and add breakpoints as needed. Example:
@media (min-width: 768px) {
/* Tablet styles */
}
@media (min-width: 1024px) {
/* Desktop styles */
}
What's the difference between Flexbox and Grid?
Flexbox is one-dimensional and perfect for laying out items in a row or column. Grid is two-dimensional and ideal for complex layouts with rows and columns. Use Flexbox for component-level layouts and Grid for page-level layouts.
How do I center elements vertically and horizontally?
The easiest way is using Flexbox:
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}