Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial; padding: 20px; } .row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .col { display: flex; flex-direction: column; gap: 10px; width: 200px; margin-bottom: 24px; } .item { padding: 16px; background: #6366f1; color: white; border-radius: 6px; text-align: center; } .item.g { background: #10b981; } </style> </head> <body> <h3>Row (wrapping)</h3> <div class="row"> <div class="item">A</div><div class="item">B</div> <div class="item">C</div><div class="item g">D (wrap)</div> </div> <h3>Column</h3> <div class="col"> <div class="item">Top</div> <div class="item">Middle</div> <div class="item">Bottom</div> </div> </body> </html>
Result
Open