CSS Grid Article Layouts #css #grid

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.pug

-
  var articles = [
    {
      "articleTitle": "Olympic Games Set to Kick Off in Spectacular Opening Ceremony",
      "author": "Sarah Evans",
      "date": "June 30, 2023"
    },
    {
      "articleTitle": "World Leaders Gather for Climate Change Summit",
      "author": "Jane Thompson",
      "date": "June 25, 2023"
    },
    {
      "articleTitle": "Major Security Breach Exposes Millions of User Data",
      "author": "Jessica Williams",
      "date": "May 19, 2023"
    },
    {
      "articleTitle": "Researchers Discover Ancient Civilization in Unexplored Jungle",
      "author": "Robert Foster",
      "date": "April 12, 2023"
    },
    {
      "articleTitle": "New Study Reveals Benefits of Mediterranean Diet",
      "author": "David Reynolds",
      "date": "April 6, 2023"
    },
    {
      "articleTitle": "New York City Implements Radical Transportation Changes",
      "author": "Andrew Mitchell",
      "date": "March 2, 2023"
    },
    {
      "articleTitle": "Celebrated Author Releases Highly Anticipated Novel",
      "author": "Jennifer Adams",
      "date": "March 27, 2023"
    },
    {
      "articleTitle": "Breakthrough in Cancer Research Promises Potential Cure",
      "author": "Emily Parker",
      "date": "March 14, 2023"
    },
    {
      "articleTitle": "Artificial Intelligence Takes Center Stage at Tech Conference",
      "author": "Michael Hernandez",
      "date": "February 22, 2023"
    },
    {
      "articleTitle": "Investigation Uncovers Government Corruption Scandal",
      "author": "Matthew Collins",
      "date": "February 5, 2023"
    }
  ];


mixin box(i)
  .box
    p= i

mixin aspect-unsplash(keyword,i)
  figure.relative.w-full.max-w-full.h-0.overflow-hidden(class="pt-[56.25%]")
    img.h-full.w-full.max-h-full.object-cover.absolute.top-0.left-0(src=`https://source.unsplash.com/random?skateboard&sig=${i}`)

mixin unsplash(keyword,i)
  figure.absolute.w-full.max-w-full.min-h-0.h-64.max-h-full.inset-0
    img.h-full.w-full.max-h-full.object-cover.min-h-0.absolute.inset-0(src=`https://source.unsplash.com/random?skateboard&sig=${i}`)


mixin images(keyword, count)
  each image,index in Array(count)
    img.w-full.max-h-full.object-cover.min-h-0(src=`https://source.unsplash.com/random?skateboard&sig=${index}`)


mixin content(article)
  div.z-10.self-end.w-full.text-white.bg-black
    h2= article.articleTitle
    p= article.author
    p= article.date

mixin article(article,i,flex='flex-col')
  .article.min-h-0.w-full(class=flex)
    +unsplash('skateboard',i)
    +content(article)

mixin solid(article,i)
  .relative.border.h-64.flex
    +unsplash('skateboard',i)
    +content(article)




doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
    script(src="https://cdn.tailwindcss.com")
  body
    //- https://css-tricks.com/almanac/properties/g/grid-auto-rows/
    h4 Image Gallery: Fixed height, fixed elements (images should fill the space)
    h4 Image Gallery: Min-Height, fixed elements
    h4 Image Gallery: Min-Height, unknown number of elements
    h4 Image Gallery: nested grid
    h4 Image Gallery: Grid area
    h4 Image Gallery: Aspect
    h4 All grids should go to single column on mobile

    .grid.grid-cols-1.items-end.min-h-min.max-h-max.border.border-red-500(class="md:grid-cols-3")
      +images('skateboard',3)
      +images('skateboard',3)
      +images('skateboard',3)




    //- .grid.grid-cols-2.border
    //-   +solid(articles[0],0)
    //-   +solid(articles[1],1)
    //-   +solid(articles[2],2)
    //-   +solid(articles[3],3)
    //-   +solid(articles[4],4)
    //- h4 Grid One
    //- .grid.grid-template-a.min-height-60.height-60
    //-   //- +article(articles[0],0)
    //-   +images('skateboard',5)


//-
    h4 Grid Two
    .grid.grid-2.min-height-60
      //- +article(articles[0],0)
      +unsplash('skateboard',0)
      .grid.grid-2.h-full
        +images('surf',8)

    h4 Grid Three
    .grid.grid-2.min-height-60.height-60
      each item,index in Array(14)
        +box(index)

    h4 Grid Four
    .grid.grid-2.min-height-60.height-60
      each article,index in articles
        +article(article, index)

script.js

‎‎​

style.scss

.grid-template-a {
  display: grid;
  grid-template-areas: "a a b c" "a a d e";
  grid-template-columns: repeat(4, 1fr);
}

.grid-template-a > *:nth-child(1) {
  grid-area: a;
}

.grid-template-a > *:nth-child(2) {
  grid-area: b;
}

.grid-template-a > *:nth-child(3) {
  grid-area: c;
}

.grid-template-a > *:nth-child(4) {
  grid-area: d;
}

.grid-template-a > *:nth-child(5) {
  grid-area: e;
}

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}

@mixin debug {
  border: 1px solid green;
}

@mixin gta($value) {
  grid-template-areas: $value;
}

.box {
  background: lightblue;
}
.h-64 {
  height: 500px;
}
.h-full {
  height: 100%;
}
@for $i from 3 through 10 {
  .height-#{$i}0 {
    height: #{$i}0vh;
    outline: 4px solid blue;
  }
  .min-h-#{$i}0 {
    min-height: #{$i}0vh;
    border: 2px solid green;
  }
}
.grid {
  display: grid;

}

img {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

@mixin gria-area-children {
  & *:nth-child(1) {
    grid-area: a;
  }
  & *:nth-child(2) {
    grid-area: b;
  }
  & *:nth-child(3) {
    grid-area: c;
  }
  & *:nth-child(4) {
    grid-area: d;
  }
  & *:nth-child(5) {
    grid-area: e;
  }
  & *:nth-child(6) {
    grid-area: f;
  }
  & *:nth-child(7) {
    grid-area: g;
  }
  // add h-z
  & *:nth-child(8) {
    grid-area: h;
  }
  & :nth-child(9) {
    grid-area: i;
  }
  & :nth-child(10) {
    grid-area: j;
  }
  & :nth-child(11) {
    grid-area: k;
  }
  & :nth-child(12) {
    grid-area: l;
  }
  & :nth-child(13) {
    grid-area: m;
  }

}

// Create reusable css class that can be repeated
.grid-template-a {
  @include gria-area-children;
  @include gta(
    "a a b c"
    "a a d e");
}
.grid-template-b {
  @include gria-area-children;

  @include gta(
    "b a a c"
    "d a a e");
}

.grid-template-c {
  // @include gria-area-children;

  @media (min-width: 768px) {
    @include gta(
      "b a a c"
      "d a a e");
  }
}

h2 {
  font-size: 20px;
}

.min-h-0 {
  min-height: 0px;
}