CSS Grid Templates

CSS grid is a great way to create responsive websites. It is easy to use and can be edited to fit your specific needs. You can also use them as a starting point for your own designs. This article will showcase some examples of using grid layout.

CSS Grid Templates are great for beginners and pros alike. They’re very simple to use, especially if you’re just starting out with grid systems. If you’ve already got some experience under your belt, they can help speed up your workflow by giving you a quick head-start on projects that require them (such as eCommerce websites).

Grid Properties

ValueDescription
noneDefault value. No specific sizing of the columns or rows
grid-template-areasSet the grid layout using named items
grid-template-rowsSet the size(s) of the rows
grid-template-columnsSet the size(s) of the columns
grid-auto-columnsSet the auto size of the columns
grid-auto-rowsSet the auto size of the rows
grid-auto-flowDetermine how to place auto-placed items
<div class="wrapper">
	<header class="box">Header</header>			
	<nav class="box">Navigation</nav>			
	<div class="sidebar box">Sidebar</div>			
	<main class="box">Main content</main>									
	<footer class="box">Footer</footer>						
</div>

grid-area

.sidebar {
	grid-area: sidebar;
}
nav{
	grid-area: nav;
}
main {
	grid-area: content;
}

header {
	grid-area: header;
}
footer {
	grid-area: footer;		
}
.wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 30%  70%;
	grid-template-areas:
           "header  header" "nav nav" "sidebar content" "footer footer";    
        margin-right: 10px;
}

.box {
	background: #EEE;	
	border-radius: 5px;
	padding: 20px;
	font-size: 150%;

}

grid-template-rows

<div class="grid">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
.grid {
  display: grid;
  grid-template-rows: 50px 100px 70px;
  grid-gap: 10px;
}
.grid {
  display: grid;
  grid-template-rows: minmax(200px, auto);
  grid-gap: 10px;
}

grid-template-columns

.grid {
  display: grid;
  grid-template-columns: 100px 2fr 200px;
  grid-gap: 10px;
}
.grid {
  display: grid;
  grid-template-columns: minmax(auto, 25%) 1fr 3em;
  grid-gap: 10px;
}

grid-auto-rows

.grid {
  height: 500px;
  display: grid;  
  grid-gap: 10px;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
}

grid-auto-columns

.grid {
  display: grid;  
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

repeat

<div class="grid">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
</div>
.grid {  
  display: grid;  
  grid-gap: 10px;  
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 150px);
}

Awesome CSS Grid Templates

Auto Hexagonal Layout

This is without a doubt one of the more unique instances in which CSS Grid may assist us in accomplishing something that previously appeared to be almost impossible.

See the Pen Auto Hexagonal CSS Grid Layout by Kseso (@Kseso) on CodePen.

Responsive Periodic Table

This periodic table is a wonderful illustration of how much information can be provided with CSS grid properties.

See the Pen Responsive Periodic Table with CSS Grids by Dudley Storey (@dudleystorey) on CodePen.

eCommerce Grid Snippet

This 3D eCommerce grid layout can be used as a category archive. The triangular isometric grid makes it easy to see all products at once, with pricing and brand information displayed on each product’s page individually instead of just one big list like most websites do nowadays!

See the Pen Isometric eCommerce CSS Grid by Andy Barefoot (@andybarefoot) on CodePen.

Wim Crouwel’s Calendar

Designing a calendar with CSS grid is a great way to learn all about the possibilities of this new layout system. In this design, Wim Crouwel created a stunning calendar using CSS grid.

See the Pen Wim Crouwel’s Calendar (CSS Grid) by Chris Droom (@droom) on CodePen.

Responsive Magazine Layout

Magazine layouts are an easy way to create the perfect layout for your website content. With CSS grid, you can get this look with a few CSS lines! The best part? There’s no need for pesky workarounds!

See the Pen CSS Grid Layout Module – Responsive Magazine Layout by Heather Buchel (@hbuchel) on CodePen.

With this photo gallery, you won’t have to worry about your site loading slowly or giving off an unprofessional look. It’s fully customizable with React and CSS Grid so it will work great for any device!

See the Pen React & CSS Grid Image Gallery by Tobi Weinstock (@tvweinstock) on CodePen.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close