I haven't been able to find a solution, but it seems it should be simple enough with CSS Grid.
I have a 2x2 grid. So far, I have only:
display: grid;
grid-template-columns: 50% 50%;
My grid looks like this:
A1 A2
B1 B2
How do I change the flow so that it's:
A1 B1
A2 B2
Thank you
As Temani and David have said, you can use the grid-auto-flow property to change how grid items are placed by the grid algorithm. You'll also need to specify your rows:
.container {
display: grid;
grid-template: 50% 50% / 50%;
grid-auto-flow: column;
}
<div class="container">
<div>A1</div>
<div>A2</div>
<div>B1</div>
<div>B2</div>
</div>
You can create a code like this.
.container {
width: 100%;
background-color: coral;
display: grid;
grid-template-columns: 50% 50%;
}
.a1{
background-color: blue;
}
.a2{
backgroud-color:yellow;
}
.b1{
background-color: green;
}
.b2{
background-color: yellow;
}
<div class="container">
<div>
<div class="a1">A1</div>
<div class="a2">A2</div>
</div>
<div>
<div class="b1">b3</div>
<div class="b2">b4</div>
</div>
</div>
Related
I'm new to bootstrap and I've only created grid system with pure css, I'm just learning yet how to use bootstrap. I just want to know how can I make like 20% 80% of the column of the grid and for the second grid (80%) it is something like a two rows which is 50% 50% and the main object is at second column second grid. To understand briefly here is my example. (Additional i don't know where to or what to search about how to reorder in grid system of bootstrap since it doesn't make me understand it very well.)
*,*::after,*::before {
padding:0;
margin:0;
}
.grid-system {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 20% 80%;
}
.grid-column1 {
background:pink;
}
.grid-column2 {
display:grid;
grid-template-columns:50% 50%;
grid-column: 2/2;
}
.first-column {
grid-column: 0/2;
display: grid;
grid-template-rows: 50% 50%;
}
.grid-row {
display:flex;
align-items:center;
justify-content:center;
background:red;
}
.grid-row:nth-child(2) {
background:green;
}
.second-column {
grid-column:2/2;
display:grid;
background:orange;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grid-system">
<div class="grid-column1">
</div>
<div class="grid-column2">
<div class="first-column">
<div class="grid-row">
1
</div>
<div class="grid-row">
2
</div>
</div>
<div class="second-column">
<div class="main-row">
HERE SOME IMAGES
</div>
</div>
</div>
</div>
Something like this..because I can't get any information about bootstrap reordering a columns or row or something else...It is just teachning the basic stuffs of cols-row and etc blah blah.
I've got CSS grid to produce a two-column layout. But the problem is that it's not top-aligning content in each column.
For example, in the second column, the last element should top-align to but up against the other column-two element.
body>div {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
grid-auto-flow: column;
/* https://codepen.io/maddesigns/pen/oZGWRN */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}
body>div>div:nth-of-type(1) {
height: 300px;
}
body>div>div:nth-of-type(2) {
height: 100px;
}
body>div>div:nth-of-type(3) {
height: 200px;
}
<div style="">
<div style="background:red">
1
</div>
<div style="background:green;">
2
</div>
<div style="background:yellow">
3
</div>
<div style="background:pink">
4
</div>
</div>
I couldn't use flex for this layout because I wanted to achieve this layout without defining the container height. column-count:2 would have worked without defining the container height but then I couldn't use div reordering.
So I'm using CSS grid because div reordering is still available (e.g./i.e. order:–1; works well) and it auto-divies up what to put in each of the two columns.
The gird is acting exactly as intended, to keep order and symmetry just like this. I can recommend using 2 grids side by side to achieve what you're looking for. Here's an example that I made to demonstrate this:
.left{
display: grid;
grid-template-rows: auto auto;
grid-auto-flow: column;
width: 50%;
float: left;
/* https://codepen.io/maddesigns/pen/oZGWRN */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}
.right{
display: grid;
grid-template-rows: auto auto;
grid-auto-flow: column;
width: 50%;
/* https://codepen.io/maddesigns/pen/oZGWRN */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}
.left>div:nth-of-type(1) {
height: 300px;
}
.left>div:nth-of-type(2) {
height: 100px;
}
.right>div:nth-of-type(1) {
height: 200px;
}
.right>div:nth-of-type(2) {
height: 50px;
}
<div class="left" style="">
<div style="background:red">
1
</div>
<div style="background:green;">
2
</div>
</div>
<div class="right">
<div style="background:yellow">
3
</div>
<div style="background:pink">
4
</div>
</div>
In fact, until a CSS technology arrives with the ability to automatically close the gaps, CSS in general has no solution. Something like this would probably require reflowing the document, so I'm not sure how useful or efficient it would be.
Source: https://stackoverflow.com/a/45200955/1625909
This might not be a recommended question to ask as i am not supplying code examples, but i am trying to replicate the design in the image below. I am looking for somewhere with an example of the layout so i can copy the HTML and CSS straight from it (4 boxes aligned with 1 big box) can anyone point me in the right direction or what technology i can look at? I have looked at css-grid but i am struggling to find a similar example of what i am looking for?
Thanks!
Try using Bootstrap. This layout will be very easy to develop using Bootstrap's two column layout.
CSS Grid should be able to do the trick. Quick whip up below, you can obviously adjust the column and row gaps as well as add the 100% row at the bottom for the red button in your example... this should be a good starting point for you though.
HTML:
<div class="container">
<div class="Header">
<div class="TopHeader" style="background-color:red;">
</div>
<div class="BottomHeader" style="background-color:blue;">
</div>
</div>
<div class="LeftCol" ">
<div class="Square1 " style="background-color:orange; "></div>
<div class="Square2 " style="background-color:green; "></div>
<div class="Square3 " style="background-color:orange; "></div>
<div class="Square4 " style="background-color:green; "></div>
</div>
<div class="RightCol " style="background-color:yellow; ">
</div>
</div>
CSS:
.TopHeader {
grid-area: topheader;
}
.BottomHeader {
grid-area: bottomheader;
}
.Square1 {
grid-area: square1;
}
.Square2 {
grid-area: square2;
}
.Square3 {
grid-area: square3;
}
.Square4 {
grid-area: square4;
}
.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 250px 800px;
align-content: space-around;
grid-template-areas: "header header" "leftcol rightcol";
}
.Header {
grid-area: header;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
align-content: space-around;
grid-template-areas: "topheader" "bottomheader";
}
.LeftCol {
grid-area: leftcol;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 25% 25% 25% 25%;
grid-template-areas: "square1" "square2" "square3" "square4";
}
.RightCol {
grid-area: rightcol;
}
I'm trying create template for rows in my grid block:
grid-template-rows: repeat(3, 150px);
I know, this template should be work for first 3 rows.
However, from 4 row this template is not work.
Can i make template for all rows?
P.S.
This template work only for 1st row.
grid-template-rows: 150px;
Use grid-auto-rows (automatically generated rows) instead of grid-template-rows (manually generated rows). In current case grid-auto-rows: 150px will do the trick. Demo:
.grid {
display: grid;
grid-auto-rows: 150px;
/* space between columns for demo */
grid-gap: 10px;
}
/* just styles for demo */
.grid__item {
background-color: tomato;
color: white;
}
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
Consider the following snippet:
#container{
border: solid 1px black;
display: inline-grid;
grid-template-columns: repeat(3, auto);
}
<div id="container">
<div class="row">
<div class="item">A1111</div>
<div class="item">B1</div>
<div class="item">C1</div>
</div>
<div class="row">
<div class="item">A2</div>
<div class="item">B2222</div>
<div class="item">C2</div>
</div>
<div class="row">
<div class="item">A3</div>
<div class="item">B3</div>
<div class="item">C3333</div>
</div>
</div>
The end result is a table-like display where each item of every row is the width of the widest item in that column.
A1111 A2 A3
B1 B2222 B3
C1 C2 C3333
Which is great - but I need the table laid out as rows...
A1111 B1 C1
A2 B2222 C2
A3 B3 C3333
display: table solves this - but table has some drawbacks around spacing, alignments and so-on. Therefore, grid and flex looks attractive.
Alas I cannot figure out how to get the information laid out as desired.
Adding display: grid to .row helps the order of information, but doesn't retain the equal column widths.
The item content will vary, and so cannot use fixed widths and it is not desired that the grid/flex spans the entire page/containing width.
You can define which column the grid item should be using grid-column. This means the row doesn't require a containing row div.
Working example...
#container{
border: solid 1px black;
display: inline-grid;
grid-auto-flow: row;
grid-gap: 10px;
padding: 10px;
}
.col1{
grid-column: 1;
}
.col2{
grid-column: 2;
}
.col3{
grid-column: 3;
}
<div id="container">
<div class="col1">A11111</div>
<div class="col2">B1</div>
<div class="col3">C1</div>
<div class="col1">A2</div>
<div class="col2">B2222222</div>
<div class="col3">C2</div>
<div class="col1">A3</div>
<div class="col2">B3</div>
<div class="col3">C33333333</div>
</div>
</div>
Your main problem is your markup is too deep. You have table-like markup, three levels deep: table, rows, and cells. For grid layout, you don’t need the “row” elements at all.
When you use display: grid or display: inline-grid on an element, it makes that element a grid container. Each of its child elements then become grid items. Grid items will be laid out in the grid defined by their container.
You also said you want columns of equal width. For this, you should use the fr unit rather than auto for your column sizes:
grid-template-columns: repeat(3, 1fr);
…this will make each column one “fraction” unit wide.
#container{
border: solid 1px black;
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
}
<div id="container">
<div class="item">A1111</div>
<div class="item">B1</div>
<div class="item">C1</div>
<div class="item">A2</div>
<div class="item">B2222</div>
<div class="item">C2</div>
<div class="item">A3</div>
<div class="item">B3</div>
<div class="item">C3333</div>
</div>
There's way which I would make it.
Attached JSFiddle(click)
.row {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.row > .item {
display:block;
flex: 1 1;
border: 1px solid #000;
}
There's such great guide about flex; Click here.