CSS grid, flex

-

What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout system used for laying out items in a row or column.

🔹 Key Features:

  • Direction: Either row (horizontal) or column (vertical).

  • Content flows in one direction at a time.

  • Best for aligning items in a single row or column (e.g., navbar, buttons).

  • Items can grow/shrink to fill available space.

Use for: Navbars, Toolbars, Forms and buttons

What is Grid?

Grid Layout is a two-dimensional system used to create complex web layouts in rows and columns simultaneously.

🔹 Key Features:

  • Layout in both rows and columns.

  • Explicit placement of items using grid lines.

  • Ideal for complex layouts like page structures, dashboards, galleries, etc.

Use For: Page Layout, Galleries, Dashboards, Complex nested layouts

Feature Flexbox Grid
Layout Direction One-dimensional (row or column) Two-dimensional (rows and columns)
Best For Content alignment Page layout
Item Placement Based on source order Can be placed explicitly using line numbers
Complexity Simpler More powerful for complex layouts
Alignment Aligns content along main/cross axis Aligns rows and columns independently












Comments

Post a Comment

Popular posts from this blog

Basic Web Design with HTML and CSS

-
Image
Webpage A  web page  or  webpage  is a document, commonly written in  HTML , that is viewed in an Internet  browser . A web page can be accessed by entering a  URL  address into a browser's  address bar . A web page may contain text, graphics, and  hyperlinks  to other web pages and files.   WebSite : A website is a collection of several web pages. These pages are linked together with hyperlinks. A website has a unique domain name, and we can access it by entering that domain name in the URL. A domain name is a string of characters that identifies a website. It is what users type in their browser to visit your site.   Web hosting is a service that provides space on a server for your website files, allowing it to be available on the internet. When visitors access your domain name, the hosting provider will transfer those files to their web browsers.   Two types of website Static website ...
Read more

Project Web Design Assignment

-
Image
  Assignment-3 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Employee Information Form</title> </head> <body>     <div style="width:30%; margin: auto;">         <form action="#" method="POST">             <fieldset>                 <legend>Employee Details</legend>                                 <!-- Name Field -->                 <label for="name">Name:</label>                 <input type="text" id="name" name="name" required><br><br>           ...
Read more