Quick start

Dividing a website into logical sets of data has been quite complex, specially when web developers need to consider responsiveness.

CSS Grid is a modern set of properties for a website that allow a developer to style the page in an easier and more flexible way. Also it allows the page to become responsive without having to write complex code.

To master CSS Grids, think of a website as a spreadsheet. You can divide the page in any number of logical segments. The following example divides a div (the div could be the body of a page) in 2 columns and 2 rows.

1
2
3
4
HTML
				
					<div id="tutorialQuickStart">
						  <div>1</div>
						  <div>2</div>
						  <div>3</div>
						  <div>4</div>
					</div>

				
CSS
				
					#tutorialQuickStart{
						  display: grid;
						  grid-template-columns: 1fr 1fr;
						  grid-template-rows: 1fr 1fr;
						  width: 100%;
						  height: 200px;
					}
					#tutorialQuickStart div{
						  display: grid;
						  justify-content: center;
						  align-items: center;
					}
					#tutorialQuickStart div:nth-child(1){
						  background-color: rgba(130,0,255,0.8);
					}
					#tutorialQuickStart div:nth-child(2){
						  background-color: rgba(130,0,255,0.6);
					}
					#tutorialQuickStart div:nth-child(3){
						  background-color: rgba(130,0,255,0.4);
					}
					#tutorialQuickStart div:nth-child(4){
						  background-color: rgba(130,0,255,0.2);
					}

				
Download full example file_download
keyboard_arrow_right
Thumb up "Quick start"
thumb_up
296
"Quick start" views today
today
21
"Quick start" total views
face
358
CSS GRIDS visits
people
15.863