Q:
How can I add padding and margin between my rows and columns?
I'm currently using this code and would like to add space between the rows and columns. At the moment they're touching, but I want to add a space between them. Also, how can I center align them?
The columns are being placed on the top, right, and bottom.
Any help is appreciated.
A:
I suggest to use flexbox instead. You'll be able to specify the margins.
.container {
border: 1px solid black;
width: 30%;
display: flex;
flex-direction: column;
}
.item {
border: 1px solid black;
width: 100%;
height: 200px;
}
.item:nth-child(even) {
background-color: red;
}
.item:nth-child(odd) {
background-color: green;
}
I also suggest you use SASS.
@import 'sass';
.container {
border: 1px solid black;
width: 30%;
display: flex;
flex-direction: column;
margin: 50px; /* optional */
}
.item {
border: 1px solid black;
width: 100%;
height: 200px;
margin: -10px 0 0 0; /* margin here */
}
test
test
test
test
test
test
test
test
test
You can always set a specific width (or max-width) for the container, in case you want to align it to some point. For example:
@import 'sass';
.container {
border: 1px solid black;
width: 400px; /* <-- your specific width */
display: flex;
flex-direction: column;
margin: 50px; /* optional */
}
.item {
border: 1px solid black;
width: 100%;
height: 200px;
margin: -10px 0 0 0; /* margin here */
}
test
test
test
test
test
test
You can use a css grid to have more control on the alignment, spacing, etc of the divs (I suggest you to learn about it).
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
border: 1px solid black;
width: 600px;
height: 200px;
}
.item {
border: 1px solid black;
grid-column: span 2;
grid-row: span 2;
}
