EN
HTML / CSS - how to set cells borders inside grid to have the same width?
1 answers
3 points
I want to add borders of the same width to all cells inside my grid. How can I get rid of multiplying borders?
What I have:
What I want:
I've tried to modify the solution below using box-sizing to have borders of the same width in a whole grid, but it didn't work.
My code:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.grid {7
display: flex;8
}9
10
.column {11
flex: 1;12
}13
14
.cell{15
border: 1px solid;16
text-align: center;17
}18
19
</style>20
</head>21
<body>22
<div class="grid">23
<div class="column">24
<div class="cell">1.1</div>25
<div class="cell">1.2</div>26
<div class="cell">1.3</div>27
</div>28
<div class="column">29
<div class="cell">2.1</div>30
<div class="cell">2.2</div>31
<div class="cell">3.3</div>32
</div>33
<div class="column">34
<div class="cell">3.1</div>35
<div class="cell">3.2</div>36
<div class="cell">3.3</div>37
</div>38
</div>39
</body>40
</html>Note:
The code is based on the following article: HTML - create grid using flexbox
1 answer
3 points
There's a simple trick to achieve this:
1. Set border-top and border-left properties of the whole grid.
2. Set border-right and border-bottom of your cells.
3. The two above together will give you a pretty border.
Practical example
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.grid {7
display: flex;8
border-top: 1px solid; /* <--- required */9
border-left: 1px solid; /* <--- required */10
}11
12
.column {13
flex: 1;14
}15
16
.cell {17
text-align: center;18
border-right: 1px solid; /* <--- required */19
border-bottom: 1px solid; /* <--- required */20
}21
22
</style>23
</head>24
<body>25
<div class="grid">26
<div class="column">27
<div class="cell">1.1</div>28
<div class="cell">1.2</div>29
<div class="cell">1.3</div>30
</div>31
<div class="column">32
<div class="cell">2.1</div>33
<div class="cell">2.2</div>34
<div class="cell">3.3</div>35
</div>36
<div class="column">37
<div class="cell">3.1</div>38
<div class="cell">3.2</div>39
<div class="cell">3.3</div>40
</div>41
</div>42
</body>43
</html>0 commentsShow commentsAdd comment
