Scribd
Upload
4 views1 page

Assignment in Web Dev

The document discusses CSS Grid Layout and CSS Flex, highlighting their definitions and differences. CSS Grid is a two-dimensional system ideal for complex layouts, while Flex is a one-dimensional system focused on aligning items. The author prefers Grid for its control over rows and columns, ensuring structured and consistent designs across various screen sizes.

Uploaded by

Park Jiminshii
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views1 page

Assignment in Web Dev

The document discusses CSS Grid Layout and CSS Flex, highlighting their definitions and differences. CSS Grid is a two-dimensional system ideal for complex layouts, while Flex is a one-dimensional system focused on aligning items. The author prefers Grid for its control over rows and columns, ensuring structured and consistent designs across various screen sizes.

Uploaded by

Park Jiminshii
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

Sedigo, Micah G.

Web Development
BSCS 1 - A February 17, 2025

ASSIGNMENT NO. 1

CSS Grid Layout


Definition: CSS Grid Layout is a two-dimensional grid system that allows web developers to divide
a page into rows and columns, making it easy to create complex layouts. It consists of horizontal and
vertical lines that form a structured pattern, helping align design elements consistently across pages.
This prevents elements from shifting or changing width, ensuring greater stability in a website’s
layout. A typical grid includes columns, rows, and gaps—commonly referred to as gutters—between
them, providing better organization and spacing.

CSS Flex
Definition: The flex property is a shorthand property in CSS that defines how a flex item behaves
within a flex container. It specifies how the item grows, shrinks, and sets its initial size before any
flexible growth or shrinkage occurs.
This property is used only on elements inside a Flexbox layout where it is a one-dimensional layout
model for distributing space between items and includes numerous alignment capabilities.

GRID VS FLEX
Grid is a two-dimensional layout Flexbox is a one-dimensional layout
system that allows elements to be system designed for aligning items
placed in rows and columns, making in a row or column. It follows a
it ideal for complex layouts that content-first approach, meaning
require precise alignment and elements adjust dynamically based
spacing. It supports layout-first on content size. Flexbox excels at
design, meaning the structure is pushing content to extreme
defined before content is added. alignment, making it useful for
Grid provides space-occupying distributing space efficiently. It
features that let items flex within is generally faster and more
the grid, but it can be less efficient for simpler layouts but
performant due to its complexity. lacks the two-dimensional control
of Grid.

If I’m ask what will I choose between the two, I will choose Grid because I want full control over
both rows and columns, making it easier to create a structured and organized layout. Since Grid is two-
dimensional, I can precisely position elements without relying on extra tricks like margins or negative spacing.
This is especially useful if I’m designing a complex layout, such as a webpage with multiple sections,
sidebars, and content areas that need to stay aligned.

Another reason I prefer Grid is that it allows me to define the layout first, so I don’t have to
worry about content pushing things out of place. It also helps with consistency, ensuring my design
stays clean and proportional across different screen sizes. While Flexbox is great for simpler
alignments, Grid gives me the structure I need to create a well-balanced and visually appealing
layout.

You might also like