I want to create 6 <div> in php by a loop with size of 200x200 px and arrange these 6 div in 3 rows and 2 columns inside a div wrapper. Thanks in advance
<div class="wrapper">
<?php
$i = 1;
for ( $i=1 ; $i<=6; $i++){
div1 div2
div3 div4
div5 div6
}
?>
</div>
The generating of the divs is the easy bit - use the clear property in css and assign it using the nth-child syntax like so:
<?php
echo "<div class='wrapper'>";
for( $i=0; $i < 6; $i++ ) echo "<div>$i</div>";
echo "</div>";
?>
To see the wrapper background colour it needs a height -the 2n+1 ~ this is defined in the css specification so you need only use it like it is. Have a look on css-tricks.com etc for use of nth-child, nth-of-type(odd) etc
<style>
.wrapper{
background:blue!important;
display:block;
width:80%;
min-height:calc( 600px + 7rem );
float:none;
clear:both;
margin:1rem auto;
box-sizing:border-box;
border:2px solid black;
border-radius:1rem;
}
.wrapper div{
width:200px;
height:200px;
border:1px solid black;
float:left;
margin:1rem;
display:block;
background:whitesmoke;
}
.wrapper div:nth-child(2n+1){
clear:left;
}
</style>