SelectThat SelectThat - 1 month ago 7
CSS Question

How to make a 3x2 grid?

We have this right now but it has to be like this:

https://postimg.org/image/cw2e572zh/

I'm doing this for school and I can't figure it out the columns keep being 2x3 and not 3x2.

http://prntscr.com/crc7ln



<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>HTML CSS exercise - create a CSS Grid</title>

</head>
<body>
<div class="container">
<div class="row">
<div class="col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="row">
<div class="col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>

</body>
</html>







/* CSS */

.row {
float: left;
position: relative;
box-sizing: border-box;
width: 24%;
padding-left: 10px;
}

.col1 {
left: 5px;
border: 2px solid black;
margin-bottom: 10px;
}

.col2 {
left: 15px;
border: 2px solid black;
margin-bottom: 20px;
}

.col3 {
left: 25px;
border: 2px solid black;
}

body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}




Answer

Here you go, try to avoid floats as they seem to mess up the way your div's flow sometimes. I've applied the 24% on the columns rather than the row, also I took out the repetitive declaration of styles. I'd suggest putting the same class on the columns rather than col1, col2 and col3

<!DOCTYPE HTML>  
<html>
<head>  
<meta charset=utf-8>  
<title>HTML CSS exercise - create a CSS Grid</title>  
<style>
	.row {
		box-sizing: border-box;
		padding-left: 10px;
	}

	
	.col1, .col2, .col3 {
		left: 5px;
		border: 2px solid black;
		margin-bottom: 10px;
		display: inline-block;
		padding: 5px;
		width: 24%;
	}
  
	body {
		border-width: 0px;
		padding: 0px;
		margin: 0px;
		font-size: 90%;
		background-color: #e7e7de
}
</style>  
</head>  
<body>  
<div class="container">  
	<div class="row">  
		<div class="col1">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col2">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col3">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
	</div>  
	<div class="row">  
		<div class="col1">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col2">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col3">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
	</div>  
</div>  

</body>  
</html> 

Comments