1
Impact Of Cascading Style Sheet Grid on Web Design
Hayatullah Marwarid Hekmatullah Hillal Dilawer Khan
KDRU KDRU KDRU
hayatullahmarwarid@gmail.com hikmatullahhillal33@gmail.com Delawerkhandanish@email.com
Salim Jan
KDRU
salimjansahar@gmail.com
Abstract:
This study explores the transformative impact of
CSS Grid on web design, focusing on its ability
to streamline the creation of responsive and
complex layouts. The research examines the “Prior to CSS Grid, designers had to rely on
limitations of earlier methods such as CSS floats methods like CSS floats and Flexbox, which
and Flexbox, which struggled with multi- were not well-suited for complex, multi-
dimensional layouts and adaptability. CSS Grid dimensional layouts. CSS Grid was introduced
addresses these challenges by introducing a two- to address these challenges, offering a solution
dimensional grid system that offers precise that allows for greater control over both rows
control over rows and columns, enabling and columns and enables designers to create
consistent, flexible layouts across various more adaptable, consistent layouts across
devices. The investigation highlights the unique different screen sizes and devices” [2].
features of CSS Grid, including its support for
predictable sizing behaviors, responsive design Web design:
adaptability, and alignment properties. This
work underscores CSS Grid's role in advancing Web design encompasses the planning and
web design by providing a robust framework creation of websites. It involves the layout,
that surpasses traditional methods in efficiency visual aesthetics, usability, and overall user
and effectiveness. experience.
CSS language:
Cascading Style Sheets (CSS) is
INTRODUCTION:
a stylesheet language used to describe the
presentation of a document written
"In our study on the impact of CSS Grid on web
in HTML or XML.
design, we are investigating how the
web design layout:
introduction of CSS Grid has revolutionized the
Is the structure that defines how elements are
layout process for web designers. Specifically,
placed on a webpage. It is the plan that guides
we are focusing on how this two-dimensional
the visual presentation of the content on a
grid system has provided a more efficient,
webpage.
flexible, and standardized approach to creating
complex and responsive web layouts" [1].
need for CSS Grid to be created:
2
As websites evolved from simple documents Lack of Flexibility for Responsive
into complex, interactive applications, Design
techniques for document layout, e.g. floats, were No Easy Control Over Spacing and
not necessarily well suited for application
Order
layout. By using a combination of tables,
JavaScript, or careful measurements on floated Inconsistent Behavior Across Browsers
elements, authors discovered workarounds to
achieve desired layouts. Layouts that adapted to Flex box:
the available space were often brittle and
resulted in counter-intuitive behavior as space Flexbox, short for "Flexible Box Layout," is a
became constrained. As an alternative, authors CSS layout model designed to simplify
of many web applications opted for a fixed alignment, distribution, and space management
layout that cannot take advantage of changes in within containers. Introduced in CSS3, Flexbox
the available rendering space on a screen. provides tools for aligning items both
horizontally and vertically, making it ideal for
“The capabilities of grid layout address these one-dimensional layouts where items are
problems. It provides a mechanism for authors arranged in rows or columns. Flexbox adapts to
to divide available space for layout into columns different screen sizes, enabling developers to
and rows using a set of predictable sizing create responsive designs more easily. It uses
behaviors. Authors can then precisely position properties like justify-content, align-items, flex-
and size the building block elements of their wrap, and flex-direction to control the layout,
application into the grid areas defined by the item alignment, and order of elements without
intersections of these columns and rows” [3]. relying on complex CSS tricks like float or
clear.
float in CSS:
Limitation of flex box:
“The CSS float property is used to move an
element out of the normal document flow and One-Dimensional Layout
position it to the left or right of its container. Limited Control Over Grid-Like Layouts
For example, float: left moves the element to Explicit Control Over Gaps
the left, and float: right moves it to the right” Lack of Overlapping Content
[4]. Alignment and Distribution for Complex
Layouts
Float layouts in CSS were initially developed
for wrapping text around images, but they Grid Layout:
eventually became a workaround for creating
basic layouts, However, as web layouts grew “The CSS Grid Layout Module offers a grid-
more complex, floats proved to have several based layout system, with rows and columns,
limitations, leading to the invention of more making it easier to design web pages without
advanced tools like Flexbox. Here are some key having to use floats and positioning” [5].
limitations of float layouts
Browser Support:
Limitations:
The grid properties are supported in all modern
Lack of True Alignment Control browsers.
Dependence on Clear fixing
3
Figure No.1
Grid Elements
A grid layout consists of a parent element, with
one or more child elements.
Figure No.4
All direct children of the grid container
automatically become grid items.
Grid Columns:
The vertical lines of grid items are
called columns.
Figure No.2
Figure No.5
Figure No.3 Grid Rows:
An HTML element becomes a grid container
when its display property is set to grid or inline- The horizontal lines of grid items are
grid called rows.
4
Figure No.7
Figure No.6
Figure No.8
Grid Gaps:
The spaces between each column/row are Row Gap:
called gaps. There are two gap properties
The row-gap property sets the gap between the
rows:
Figure No.9
Figure No.7
Column Gap:
The column-gap property sets the gap between
the columns.
Figure No.10
The gap property is a shorthand property for
the row-gap and the column-gap properties:
5
Grid Properties:
The grid-template-columns Property:
The grid-template-columns property defines the
number of columns in your grid layout, and it
Figure No.11 can define the width of each column. The grid-
template-columns property can also be used to
specify the size (width) of the columns.
Example
Make a grid with 3 columns:
Figure No.12
Grid Lines:
The lines between columns are called column Figure No.14
lines.
The lines between rows are called row lines.
Figure No.15
The grid-template-rows Property:
The grid-template-rows property defines the
height of each row.
Example:
Make a grid with 4 rows:
Figure No.13
Grid Container:
To make an HTML element behave as a grid
container, you have to set the display property
to grid or inline-grid. Grid containers consist of Figure No.16
grid items, placed inside columns and rows.
6
1. Center, space-around, space-evenly,
space-between, start, end
The align-content Property:
The align-content property is used
to vertically align the whole grid inside the
container.
Figure No.17
Figure No.20
The justify-content Property:
The justify-content property is used to
horizontally align the whole grid inside the
container.
Fi
gure No.18
Figure No.21
The align-content property has multiple values:
1. center, space-around, space-evenly,
space-between, start, end
Child Elements (Items):
Figure No.19
A grid container contains grid items.
The justify-content property has multiple
values: There are three grid-item properties:
7
1. The grid-column Property:
The grid-column property defines on which
column(s) to place an item.
You define where the item will start, and where
the item will end.
Note: The grid-column property is a shorthand
property for the grid-column-start and the grid-
column-end properties.
Figure No.25
3. The grid-area Property
Figure No.22
The grid-area property can be used as a
shorthand property for the grid-row-start, grid-
column-start, grid-row-end and the grid-
column-end properties.
Example:
Figure No.23 Make "item1" start on row-line 1 and column-
line 3, and end on row-line 6 and column line 6:
2. The grid-row Property:
The grid-row property defines on which row to
place an item.
You define where the item will start, and where
Figure No.26
the item will end.
Note: The grid-row property is a shorthand
property for the grid-row-start and the grid-row-
end properties.
Figure No.24
Figure No.27
8
Literature Review: REFERENCES:
[1]
Web design has evolved significantly with the
development of new tools to improve layout
creation and responsiveness. CSS floats,
initially designed for wrapping text around
images, became a workaround for layouts but
had limitations such as alignment issues and
inflexibility for responsive designs. Flexbox
improved on floats with a one-dimensional
layout model, simplifying alignment and
distribution, but it struggled with more complex
grid-like and overlapping layouts. CSS Grid,
introduced as a two-dimensional layout system,
transformed web design by offering precise
control over rows and columns. It enables the
creation of robust, responsive layouts adaptable
to various devices and screen sizes. With
features like predictable sizing and seamless
adaptability, CSS Grid has become a key tool in
modern web development, empowering
designers to create efficient and innovative
designs.
Conclusion:
CSS Grid has revolutionized web design by
addressing the limitations of earlier layout
methods. As a two-dimensional system, it
provides precision and flexibility, simplifying
the creation of complex, responsive layouts. Its
role in advancing web development is evident
through its ability to streamline workflows and
enable creative, adaptable designs for the
modern digital landscape.
Andrew, R. (Ed.). (2017). CSS Grid Layout Moduls Level 1.
[2] geeksforgeeks. (n.d.). Retrieved Nov 24, 2024, from https://www.geeksforgeeks.org/web-
design-layouts-types-elements-and-uses/?ref=header_outind,
[3] w3schools.com. (n.d.). Retrieved 11 25, 2024, from
https://www.w3schools.com/css/css_grid.asp.
9
[4] Wely, E. A. (2023). CSS the Definitive guide web layout and presentation (Fifth ed.). US:
O'Reilly Media.
[5] www.geeksforgeeks.org. (n.d.). Retrieved 11 25, 2024, from
https://www.geeksforgeeks.org/css-float/.
