This question already has answers here:
Flex-box: Align last row to grid
(35 answers)
Closed 4 years ago.
i have a container which contain some cards, I want each card to start at left border of container and end at right border , like the below code.
<html>
<style>
.container {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.card{
border:1px solid black;
}
</style>
<body>
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
</body>
</html>
but last 2 elements have too much space between them, how can I remove it??
I have tried adding margin-left/right to behave like I want but the corner cards don't touch the border. any help??
Edit: here is what i expect and
and what I get
This is because of the behavior of justify-content: space-between. Learn about the behavior of justify-content visit here
To achieve what you wanted you can set the container as block element and set the children to be floated like float:left.
To avoid the unwanted spaces I removed the margin-left of the .card:first-child and margin-right of the .card:last-child
You can specifically set the number of card content per a row by
setting a common width and clearing the margin space for
nth-child.Currently I made this code for 5 elements per row
.container {
display: block;
width: 100%;
}
.card {
border: 1px solid black;
float: left;
margin: 1px;
padding: 10px 3px;
/*setting width for each and every card element as well as -10px for removing the margin width for 5 elements*/
width: calc( 100% / 5 - 10px);
}
/*first element*/
.container .card:first-child {
margin-left: 0;
}
/*last element of the first row*/
.container .card:nth-child(5n) {
margin-right: 0;
}
/*first-element of the 2nd row*/
.container .card:nth-child(5n+1) {
margin-left: 0;
}
/*last element*/
.container .card:last-child {
margin-right: 0;
}
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
I'm not quite sure I re-created your problem, but here is a codepen https://codepen.io/salallegra/pen/mQbBea that might help.
<html>
<style>
.container {
display: flex;
justify-content: space-between;
border-style: solid;
border-width: 1px;
border-color: red;
margin-left: 0px;
margin-right: 0px;
flex-direction: row;
flex-wrap: wrap;
}
.card {
border-style: solid;
border-width: 1px;
border-color: red;
}
body {
margin-left: 0;
margin-right: 0;
}
</style>
<body>
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
</body>
</html>
I removed the left and right margin of the body and placed borders around all the cards, and the container itself.
I also checked different view port sizes in Chrome developer tools and the spacing looks fine at different sizes.
Related
I am trying to create 6 icons that have text on the side that falls in two lines. Each icon should be 2 in a line before going on to the next row. See this image: https://imgur.com/a/AxW5aWb
My initial code attempt below which was followed up with a display: inline-block CSS on the text.
My issues are:
Getting the text on the right side to appear in two lines while remaining inline with the icon on the left
Creating multiple icons where two fall in a row at a time
<div class="section">
<img src="/uploads/2023/02/Aargang.svg" class="ikon1" alt="Test">
<div class="ikontext">
Year<br>
<strong>2011</strong>
</div>
</div>
An example using flex.
.container {
display: flex;
width: 320px;
flex-wrap: wrap; // this makes sure items are dropped to the next row when they are out of space
}
.item {
display: flex;
margin-bottom: 20px;
flex-basis: 50%; // this makes sure there are two items per row
}
.icon {
width: 40px;
height: 40px;
background-color: grey;
}
.text {
margin-left: 10px;
}
.text-bottom {
font-weight: bold;
}
<div class="container">
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
</div>
I have a container that is holding cards. the container has a overflow-x: scroll; and is not showing all of the cards(its cutting some of one off). with enough cards it will auto add a scroll bar, yet it seams to be offset by 60px yet there is nothing that might be moving it.
#cardcontainer {
width: 100%;
height: fit-content;
margin-top: 20vh;
margin-left: 0px;
display: flex;
justify-content: center;
overflow-y: hidden;
overflow-x: scroll;
}
.card {
max-width: 300px;
background-color: rgb(64, 64, 64);
padding: 6px;
margin: 0px 0.5%;
border-radius: 12px;
display: inline-block;
position: relative;
}
<div id="cardcontainer">
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
</div>
the card on the left is being cut off even though i set the overflow to scroll. could u what your declared max-width is and how the result looks like. Thanks ^^
enter image description herei need your help for my bootstrap website. I struggling around to get it working but always got this annoying grid issue? I dont know exactly what it is. The Output eats some of my colores boxes if i lower the size of the screen. (using Firefox, Bootstrap)
.row {
width:100%;
height:15rem;
background-color: green;
margin:0 auto;
margin-top: 3%;
}
.container{
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.col-md-4{
position: relative;
padding:5px;
height:100%;
}
.col-md-12{
height:100%;
}
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-md-4" style="background-color:yellow;">
<div class="col-md-12" style="background-color:lightyellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:red;">
<div class="col-md-12" style="background-color:darkred;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:blue;">
<div class="col-md-12" style="background-color:lightblue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color:purple;">
<div class="col-md-12" style="background-color:red;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:pink;">
<div class="col-md-12" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:lightblue;">
<div class="col-md-12" style="background-color:blue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
As you can see in the picture below the 2end and 3rd items are hidden under the next row. What i'm doing wrong? The should line up under each otherafter i lower the display size. There should be 6 boxes inside but it only displays 4 of them.Full view should looks like this
elemts got eaten by each other why?Small view for smartpone
behind the red box is some other hidding. I tried alot and failed so hard. Maybe someone can help me.
left and right white space
The height on the row is causing your problems. You could move the height to be on the columns instead (or remove it entirely if you don't need them to be expanded like that).
.row {
width: 100%;
background-color: green;
margin: 0 auto;
margin-top: 3%;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.col-md-4 {
position: relative;
padding: 5px;
height: 15rem;
}
.col-md-12 {
height: 15rem;
}
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-md-4" style="background-color:yellow;">
<div class="col-md-12" style="background-color:lightyellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:red;">
<div class="col-md-12" style="background-color:darkred;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:blue;">
<div class="col-md-12" style="background-color:lightblue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color:purple;">
<div class="col-md-12" style="background-color:red;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:pink;">
<div class="col-md-12" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:lightblue;">
<div class="col-md-12" style="background-color:blue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
I am looking for ways to add in a 3x3 grid of circle icons to my website. Each icon needs to contain a caption text (including sub-caption text) and be spaced evenly apart. The center icons need to be in the center of the webpage.
I unfortunately have been stuck for the last couple of hours, and I have no idea on how to achieve this. I would appreciate any help.
Here is a mostly flexbox grid with square cells and centered content that will evenly space the circle/text.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 90%;
margin: auto;
background: #eee;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
background: #ccc;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto 1em;
}
.inner {
text-align: center;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
</div>