How to Use Grid Layouts for Effective Web Design

manoj
manoj , Credit to  volkotech-solutions Mar 01

Common types of grid layouts include fixed, modular, fluid, hierarchical, and multi-column grids, used in graphic and web design.

Types of grid layouts

You can see examples for types of grid layouts

Layouts Definition Syntax Example Output
Fixed Layout CSS fixed layout is a design approach where the position and size of elements on a webpage are set to fixed values.

display: grid;
grid-template-columns: <Value> <Value> <Value>;
grid-template-rows: <Value> <Value>;

 
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 100px 1fr;
  grid-gap: 20px;
  height: 400px;
  width: 600px;
}
 fixed grid layout image
Fluid Layout The fluid layout basically means the size of the page changes as the window resizes display: grid;
grid-template-columns: repeat(auto-fit, minmax(<Value>, <Value>));
grid-template-rows: <Value> <Value>;		 
.container {
 display: grid;
 grid-template-columns: repeat
 (auto-fit, minmax(200px, 1fr));
 grid-gap: 20px;
 height: 400px;
 width: 600px;
}
 fluid grid layout image
Modular Layout The modular layout allows creating of reusable and flexible design components. display: grid;
grid-template-columns: repeat(4, <value>);
grid-template-rows: repeat(2, <value);		 
.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(2, 1fr);
 grid-gap: 20px;
 height: 400px;
 width: 600px;
}
 modular grid layout image
Hierarchical Layout Hierarchical layout is a way of arranging elements on a webpage based on their parent-child relationship grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;		 
.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 grid-gap: 20px;
 height: 400px;
 width: 600px;
}

.parent {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 grid-gap: 10px;
}
 hierarchical grid layout image
Multi-column grid Layout A multi-column grid layout is a type of layout used in web design that arranges content into multiple columns. columns: <'column-width'> | <'column-count'>: 
.container {
 column-count: 3;
 column-gap: 20px;
}
 multi-column grid layout image

Related Posts

like21 likes BookmarkAdd to read list

Share

share your add link

copy-icon

Share in social

  • Facebook-icon
  • Twitter-icon
  • Telegram-icon
  • Linkedin-icon
  • Whatsapp-icon
Close-icon

Comments

Authors

Read Next