I want to create layout where the last element is centered. I should do with grids, but cant center the last element
Desired view
.box {
min-width: 50px;
min-height:50px;
background: red;
margin: 5px;
}
.container {
width: 200px;
display: grid;
grid-template-columns: auto auto auto;
}
.box7 {
grid-column-start: 2;
grid-row-start: 3;
grid-column-end: 4;
}
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box box7'>7</div>
<div>
Desired view
.box {
min-height: 50px;
background: red;
margin: 5px;
grid-column: span 2;
}
.container {
width: 200px;
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.box7 {
grid-column-start: 2;
grid-column-end: 6;
}
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box box7'>7</div>
<div>
You can also find multiple ways on this discussion
I hope this approach of mine will help you:
.box {
min-width: 50px;
min-height:50px;
background: red;
margin: 5px;
}
.container {
width: 200px;
display: grid;
grid-template-rows: repeat(3, [row] auto );
grid-template-columns: repeat(3, [col] auto) ;
}
.subgrid {
grid-column: col / span 3;
grid-row: row 3;
}
.box7
{
width:66%;
margin-left:auto;
margin-right:auto;
}
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class="subgrid">
<div class='box box7'>7</div>
</div>
<div>
Related
Im trying to create css grid while keeping the same height of columns and I want to keep 16:9 ratio for first item. I also want to fit these images in but it seems they are not fitting by few pixels.
Is there any way to do that with grid? Or will I have to do it with flexbox?
.container {
width: 480px;
max-width: 480px;
height: 480px;
max-height: 480px;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
grid-gap: 0.375rem;
}
.item:nth-child(1) {
aspect-ratio: 16 / 9;
grid-column: span 3;
}
.item:nth-child(2) {
grid-column: span 2;
grid-row: span 2;
}
.item:nth-child(3) {
aspect-ratio: 4 / 3;
grid-column: span 3;
grid-row: auto;
}
.item img {
width: 100%;
height: auto;
object-fit: cover;
}
<div class="container">
<div class="grid">
<div class="item"><img src="https://picsum.photos/1280/720" alt="" srcset="" /></div>
<div class="item"><img src="https://picsum.photos/300/600" alt="" srcset="" /></div>
<div class="item"><img src="https://picsum.photos/480/320" alt="" srcset="" /></div>
</div>
</div>
You can simplify your code like below:
.container {
width: 480px;
height: 480px;
}
.grid {
display: grid;
grid-template-columns: 4fr 3fr; /* adjust this like you want */
grid-gap: 0.375rem;
}
img:nth-child(1) {
aspect-ratio: 16 / 9;
}
img:nth-child(2) {
grid-row: span 2;
/* the below will make sure the image get the height of first column*/
height: 0;
min-height: 100%;
/* */
}
img {
width: 100%;
object-fit: cover;
}
<div class="container">
<div class="grid">
<img src="https://picsum.photos/1280/720" alt="" srcset="">
<img src="https://picsum.photos/300/600" alt="" srcset="">
<img src="https://picsum.photos/480/320" alt="" srcset="">
</div>
</div>
So I am testing on CSS Grid, I have made a 4 column grid and in one of the rows I added a 3 column grid. I am having trouble having the elements of the inner grid fill out.
Changing the style="padding:0px" of the InnerGrid1 div works, but if i add that same line of styling in the dedicated CSS section it does not respond. This tells me that I am over-writing something in my inline css but i would like to know what it is
This is all my code
<head>
<style>
* {
text-align: center;
}
.MainGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.MainGrid > div {
padding: 1em;
grid-gap: 1em;
border-style: solid;
}
.Unchangeables {
background-color: rgb(121, 212, 248);
}
.Header {
grid-column: 1/5;
}
.Gridtitle {
grid-column: 1/5;
background-color: rgb(121, 212, 248);
}
.QR {
grid-column: span 2;
grid-row: span 2;
}
.PicQR {
grid-row: span 2;
background-color: rgb(121, 212, 248);
}
.TypeOfAccountText {
grid-column: 1/4;
border-style: solid;
}
.Footer {
grid-column: 1/5;
}
.AccountName {
grid-column: 2/4;
}
.PictureUpload {
grid-row: span 6;
}
.CivilIDEntry {
grid-column: span 2;
}
.NationalityEntry {
grid-column: span 2;
}
.AddressEntry {
grid-column: span 2;
}
.DOBEntry {
grid-column: span 2;
}
.MovementEntry {
grid-column: span 2;
}
.TextOrQrCodeEntry {
grid-column: span 3;
}
.JudgementText {
grid-column: span 3;
}
.Tweet {
border-style: solid;
}
.TypeOfActivity {
border-style: solid;
}
.InnerGrid1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column: span 2;
}
.InnerGrid1 > div {
border-style: solid;
padding: 1px;
}
</style>
</head>
<body>
<div class="MainGrid">
<div class="Header">HEADER IMAGE HERE</div>
<div class="GridTitle">
بطاقة طلب مرئيات لمنشور في موقع للتواصل الإجتماعي
</div>
<div class="Unchangeables">*******#</div>
<div class="Unchangeables">إسم الحساب</div>
<div class="Unchangeables">Twitter</div>
<div class="Unchangeables">الموقع</div>
<span contenteditable="true" class="TypeOfActivity">نوع النشاط</span>
<div class="QR">Pic-QR CODE</div>
<div class="PicQR">صورة المنشور/ التغريدة</div>
<span class="Tweet" contenteditable="true">تغريد</span>
<span contenteditable="true" class="TypeOfAccountText">***text***</span>
<div class="Unchangeables">طبيعة نشاط الحساب</div>
<div>صورة شخصية</div>
<div class="AccountName">********</div>
<div class="Unchangeables">إسم صاحب الحساب</div>
<div class="PictureUpload">BIG PICTURE</div>
<div class="CivilIDEntry">*****25</div>
<div class="Unchangeables">الرقم المدني</div>
<div class="NationalityEntry">كويتي الجنسية / إسم الأم / خزنة مسير</div>
<div class="Unchangeables">الجنسية</div>
<div class="DOBEntry">٥٦ سنة مواليد 1966/10/18</div>
<div class="Unchangeables">العمر</div>
<div class="InnerGrid1">
<span contenteditable="true">مدرس</span>
<div class="Unchangeables">الحالة الوظيفية</div>
<span contenteditable="true">متزوج </span>
</div>
<!--End of InnerGrid1-->
<div class="Unchangeables">الحالة الاجتماعية</div>
<div class="AddressEntry">
صليبيخات، قطعة (*) جادة (*) منزل (*) <br />
هاتف رقم *******
</div>
<div class="Unchangeables">العنوان</div>
<div class="MovementEntry">
داخل البلاد قادما من إيران بتاريخ ٢٣/٧/ ٢٠٢١و لديه الكثير من الحركة إلي
العراق و إيران
</div>
<div class="Unchangeables">الحركة</div>
<div class="TextOrQrCodeEntry">Text or qr code</div>
<div class="Unchangeables">السوابق الجنائية</div>
<div class="JudgementText">text</div>
<div class="Unchangeables">الرأي القانوني</div>
<div class="Footer">Footer</div>
</div>
<!--MainGrid End-->
</body>
</html>
the class "InnerGrid1" is the grid within the "MainGrid" class.
This is how it looks like with the problem:
This is how it looks like after its fixed by adding "padding:0px" inline css at InnerGrid1 div:
The problem was that I had set a padding already for all divs within my "MainGrid" class here:
.MainGrid > div {
padding: 1em;
grid-gap: 1em;
border-style: solid;
}
Remove padding from Maingrid class and give to Unchangeables class.
* {
text-align: center;
}
.MainGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.MainGrid>div {
grid-gap: 1em;
border-style: solid;
}
.Unchangeables {
padding: 1rem;
background-color: rgb(121, 212, 248);
}
.Unchangeables {
}
.Header {
grid-column: 1/5;
}
.Gridtitle {
grid-column: 1/5;
background-color: rgb(121, 212, 248);
}
.QR {
grid-column: span 2;
grid-row: span 2;
}
.PicQR {
grid-row: span 2;
background-color: rgb(121, 212, 248);
}
.TypeOfAccountText {
grid-column: 1/4;
border-style: solid;
}
.Footer {
grid-column: 1/5;
}
.AccountName {
grid-column: 2/4;
}
.PictureUpload {
grid-row: span 6;
}
.CivilIDEntry {
grid-column: span 2;
}
.NationalityEntry {
grid-column: span 2;
}
.AddressEntry {
grid-column: span 2;
}
.DOBEntry {
grid-column: span 2;
}
.MovementEntry {
grid-column: span 2;
}
.TextOrQrCodeEntry {
grid-column: span 3;
}
.JudgementText {
grid-column: span 3;
}
.Tweet {
border-style: solid;
}
.TypeOfActivity {
border-style: solid;
}
.InnerGrid1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column: span 2;
}
.InnerGrid1>div {
border-style: solid;
padding: 1px;
}
<div class="MainGrid">
<div class="Header">HEADER IMAGE HERE</div>
<div class="GridTitle">
بطاقة طلب مرئيات لمنشور في موقع للتواصل الإجتماعي
</div>
<div class="Unchangeables">*******#</div>
<div class="Unchangeables">إسم الحساب</div>
<div class="Unchangeables">Twitter</div>
<div class="Unchangeables">الموقع</div>
<span contenteditable="true" class="TypeOfActivity">نوع النشاط</span>
<div class="QR">Pic-QR CODE</div>
<div class="PicQR">صورة المنشور/ التغريدة</div>
<span class="Tweet" contenteditable="true">تغريد</span>
<span contenteditable="true" class="TypeOfAccountText">***text***</span>
<div class="Unchangeables">طبيعة نشاط الحساب</div>
<div>صورة شخصية</div>
<div class="AccountName">********</div>
<div class="Unchangeables">إسم صاحب الحساب</div>
<div class="PictureUpload">BIG PICTURE</div>
<div class="CivilIDEntry">*****25</div>
<div class="Unchangeables">الرقم المدني</div>
<div class="NationalityEntry">كويتي الجنسية / إسم الأم / خزنة مسير</div>
<div class="Unchangeables">الجنسية</div>
<div class="DOBEntry">٥٦ سنة مواليد 1966/10/18</div>
<div class="Unchangeables">العمر</div>
<div class="InnerGrid1">
<span contenteditable="true">مدرس</span>
<div class="Unchangeables">الحالة الوظيفية</div>
<span contenteditable="true">متزوج </span>
</div>
<!--End of InnerGrid1-->
<div class="Unchangeables">الحالة الاجتماعية</div>
<div class="AddressEntry">
صليبيخات، قطعة (*) جادة (*) منزل (*) <br /> هاتف رقم *******
</div>
<div class="Unchangeables">العنوان</div>
<div class="MovementEntry">
داخل البلاد قادما من إيران بتاريخ ٢٣/٧/ ٢٠٢١و لديه الكثير من الحركة إلي العراق و إيران
</div>
<div class="Unchangeables">الحركة</div>
<div class="TextOrQrCodeEntry">Text or qr code</div>
<div class="Unchangeables">السوابق الجنائية</div>
<div class="JudgementText">text</div>
<div class="Unchangeables">الرأي القانوني</div>
<div class="Footer">Footer</div>
</div>
Make it flex and align its items in center using align-items: center;
.Unchangeables {
display: flex;
justify-content:center;
align-items: center;
}
I've got the following setup:
section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr;
grid-column-gap: 1em;
}
.a {
background-color: green;
grid-column: 1/7;
griw-row: 1;
}
.b {
background-color: grey;
grid-column: 7/-1;
grid-row: 1;
}
.c {
background-color: blue;
grid-column: 1/7;
grid-row: 2;
}
.d {
background-color: yellow;
grid-column: 7/-1;
grid-row: 2;
}
<section>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
The element with css class .a is dynamic and not always available. How can I shift right column (.b) to the left when .a column is not available?
Note: I can't use grid-auto-columns as IE11 doesn't support it.
Don't explicitly define the column positions. Simply set the number of column and the auto placement will do the job for you:
section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr;
grid-column-gap: 1em;
margin: 5px;
}
section > * {
grid-column: span 6; /* all the items should take 6 columns*/
}
.a {
background-color: green;
}
.b {
background-color: grey;
}
.c {
background-color: blue;
grid-row: 2;
}
.d {
background-color: yellow;
grid-row: 2;
}
<section>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
<section>
<div class="a">
Content a
</div>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
Hello I'm trying to make a container grid with grid areas to achieve this goal:
But I am having difficulties in defining the areas of the father and the children.
.grid_layout {
display: grid;
grid-template-areas:
"a b c"
"a d e";
grid-gap: 6px;
grid-template-columns: 1fr fr 1fr;
height: 100%;
}
<div className="grid_layout">
<div className="a" />
<div className="b" />
<div className="c" />
</div>
You don't need template areas to accomplish this...but you do need six columns.
.grid_layout {
display: grid;
grid-gap: 6px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
width: 80%;
margin: 1em auto;
}
.item {
display: flex;
justify-content: center;
align-items: center;
background: lightgreen;
border: 1px solid green;
padding: 1em;
}
.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3) {
grid-column: span 2;
}
<div class="grid_layout">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
if you want to use areas , you still need to relay on 6 columns as stated in the comments.
.grid_layout {
display: grid;
grid-template-areas:
"a a b b c c "
"d e f g h i";
/*grid-template-columns:repeat(6,1fr); if you need this */
grid-gap: 6px;
height: 100%;/* 100% of what here ? parent has no height set*/
grid-auto-flow:row dense
}
img {width:100%;/* of the grid cell defined */}
img:nth-child(1) {
grid-area:a ;
}
img:nth-child(2) {
grid-area:b;
}
img:nth-child(3) {
grid-area:c;
}
img:nth-child(4) {
grid-area:d;
}
img:nth-child(5) {
grid-area:e;
}
img:nth-child(6) {
grid-area:f;
}
img:nth-child(7) {
grid-area:g;
}
img:nth-child(8) {
grid-area:h;
}
img:nth-child(9) {
grid-area:i;
}
<div class="grid_layout">
<img src="http://dummyimage.com/300x150/456">
<img src="http://dummyimage.com/300x150/789">
<img src="http://dummyimage.com/300x150/029">
<img src="http://dummyimage.com/300x150/fa0">
<img src="http://dummyimage.com/300x150/bad">
<img src="http://dummyimage.com/300x150/g0d">
<img src="http://dummyimage.com/300x150/f00">
<img src="http://dummyimage.com/300x150/555">
<img src="http://dummyimage.com/300x150/0af">
</div>
For a repeating pattern, grid-template-areas is not at best, but grid-template-columns would be better helped with grid-auto-flow:row dense; while telling text to span 2columns.
possible example :
.grid_layout {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 6px;
height: 100%;
/* 100% of what here ? parent has no height set*/
grid-auto-flow: row dense;
}
p {
border: solid;
margin: 0;
}
img {
width: 100%;
}
.a {
grid-column: 1 / span 2;
text-align: center;
}
.b {
grid-column: 3 / span 2;
text-align: center;
}
.c {
grid-column: 5 / span 2;
text-align: center;
}
div {
counter-reset: ps
}
p:before {
counter-increment: ps;
content: 'N°'counter(ps)' - ';
}
<div class="grid_layout">
<img class="a" src="http://dummyimage.com/300x150/456">
<p class="a">some text</p>
<img class="b" src="http://dummyimage.com/300x150/789">
<p class="b">some text</p>
<img class="c" src="http://dummyimage.com/300x150/029">
<p class="c">some text</p>
<img src="http://dummyimage.com/300x150/fa0">
<img src="http://dummyimage.com/300x150/bad">
<p class="a">some text</p>
<img src="http://dummyimage.com/300x150/g0d">
<img src="http://dummyimage.com/300x150/f00">
<p class="b">some text</p>
<img src="http://dummyimage.com/300x150/555">
<img src="http://dummyimage.com/300x150/0af">
<p class="c">some text</p>
</div>
I am trying to build like the below in the main content in the website layout.
Row 1: "Title text (2 columns) + Image (1 column)"
Row 2: "Box + Box + Box"
Row 3: "Box + Box + Box"
Issues:
Tried to make "Row 1" as "title-block" and make it span 3 rows. then splitting it into 2 (title-text for 2 rows and image in the last row).
Also from 2nd row.. wanted three blocks and can fill in text or image. But they are all filling up in 1 box.
Screenshot also attached below.
Where am i going wrong? I saw several examples, some are either using %'s (do not want to use) or using some complex math (n-th..) which i was not able to understand.
.main {
display: grid;
background-color: indianred;
padding: 20px;
grid-template-areas:
"title-block title-block title-block"
"box box box"
"box box box";
grid-template-columns: 1fr, 1fr, 1fr;
//grid-template-rows: repeat(3, [row] auto );
grid-gap: 10px;
}
.main > * {
//background-color: yellowgreen;
padding: 20px;
}
img {
width: 50%;
}
.title-block {
background-color: lightsalmon;
grid-column: span 3;
grid-row: span 1;
}
.title-text {
grid-column: 1 / span 2;
grid-row: 1;
}
.title-image {
grid-column: 3 / span 1;
grid-row: 1;
}
.tech {
grid-area: box;
background-color: lightcyan;
grid-column: span 3;
grid-row: span 1;
}
.books {
grid-area: box;
background-color: violet;
grid-column: span 3;
grid-row: span 1;
}
<div class="main">
<div class="title-block">
<div class=title-text><h1>Software Developer, Architect, Open-Source Evangelist, Inventor, Mentor, Blogger, Author, Speaker</h1></div>
<div class=title-image><img src="https://upload.wikimedia.org/wikipedia/en/7/70/Bob_at_Easel.jpg"></div>
</div>
<div class="tech">
<div>Tech 1</div>
<div>Tech 2</div>
<div>Tech 3</div>
</div>
<div class="books">
<div>Book 1</div>
<div>Book 2</div>
<div>Book 3</div>
</div>
</div>
Does this work for you? This is how I understood your requirement, using CSS Grid of course, if this needs some changes let me know to update it
.main {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(70px, auto);
background-color: indianred;
grid-gap: 10px;
padding: 20px;
}
.title-block, .tech, .books {
grid-column: span 3;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.title-text {
grid-column: span 2;
border: 1px solid #000;
}
.title-image{
border: 1px solid #000;
}
.title-image img{
width: 70%;
display: block;
}
.tech {
background-color: lightcyan;
}
.tech div, .books div{
border: 1px solid #000;
}
.books {
background-color: violet;
}
<div class="main">
<div class="title-block">
<div class=title-text>
<h1>Software Developer, Architect, Open-Source Evangelist, Inventor, Mentor, Blogger, Author, Speaker</h1>
</div>
<div class=title-image><img src="https://upload.wikimedia.org/wikipedia/en/7/70/Bob_at_Easel.jpg"></div>
</div>
<div class="tech">
<div>Tech 1</div>
<div>Tech 2</div>
<div>Tech 3</div>
</div>
<div class="books">
<div>Book 1</div>
<div>Book 2</div>
<div>Book 3</div>
</div>
</div>
Is this what you looking for ?
.main {
background-color: indianred;
}
.main > * {
//background-color: yellowgreen;
padding: 20px;
}
img {
width: 50%;
}
.title-block {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.title-text {
width: calc(2 * (100% / 3))
}
.title-image {
width: calc(1 * (100% / 3))
}
.tech {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.books {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
<div class="main">
<div class="title-block">
<div class=title-text><h1>Software Developer, Architect, Open-Source Evangelist, Inventor, Mentor, Blogger, Author, Speaker</h1></div>
<div class=title-image><img src="https://upload.wikimedia.org/wikipedia/en/7/70/Bob_at_Easel.jpg"></div>
</div>
<div class="tech">
<div>Tech 1</div>
<div>Tech 2</div>
<div>Tech 3</div>
</div>
<div class="books">
<div>Book 1</div>
<div>Book 2</div>
<div>Book 3</div>
</div>
</div>