COLUMNS.jpg

I want to make a grid with different column sizes ('ITEM = V' covers all width 'ITEM A' or 'P' or 'T' cover each 50 percent of the grid width), as shown in the image. Any help?

CSS

.newspaper1 {
   columns: 100% 1;
   border-style:solid
 }
.newspaper1 {
 columns: 2;
  border-style:solid
  }

HTML

  <div *ngFor="let item of items" >
      <ion-card style="border-radius: 20px 5px;" class="outer-grid">
      <div *ngIf="item==='A'" class="newspaper2">
        some content
      </div>
      <div *ngIf="item==='V'"  class="newspaper1">
        some content
      </div>
      <div *ngIf="item==='P'"  class="newspaper2">
        some content
      </div>
      <div *ngIf="item==='T'" class="newspaper2">
      some content
      </div>
    </ion-card
  </div>
Re: CSS grid different number of columns 80 80

I guess I'm not understanding what you're looking for. Why not do something like this?

<div class="full-width">
  Foo
</div>
<div class="columns">
  <div>
    Foo
  </div>
  <div>
    Bar
  </div>
  <div>
    Baz
  </div>
  <div>
    Bat
  </div>
</div>
<div class="full-width">
  Hello World
</div>

And then for the CSS:

div
{
  margin-bottom: 1rem;
  border: 1px solid black;
  padding: 1rem;
}
.full-width
{
  background-color: pink;
}
.columns
{
  columns: 2;
  border: 0;
  padding: 0;
}
.columns div
{
  background-color: green;

}

Something else that comes to mind, if you want to start involving Javascript, is to use a JS library such as Masonry.

https://masonry.desandro.com/

Re: CSS grid different number of columns 80 80

I tried all of it Dani. No luck. Seems simple but its not. I want the item = v to to be column-count =1 and other three types of items (A,T,P) to display in column-count=2. A,T,P should mix together as results so two. of them (either A,T, P) should cover 100% of width as item =V covers 100% of width as column-count =1

Re: CSS grid different number of columns 80 80

What's the purpose of it being column-count 1 instead of just a regular div above the columns?

commented: what do you mean with div above the columns? +5
Re: CSS grid different number of columns 80 80

this looked lke a good idea but its not

<!DOCTYPE html>
<html>
<head>
<style>

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2px;
    border-style: solid
}
.span-col-2{grid-column: span 2 / auto;border-style: solid}
.span-col-1{grid-column: span 1 / auto;border-style: solid}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>This grid layout contains six columns and three rows:</p>

<div class="grid">
  <div class="span-col-2">Item 1</div>
  <div class="span-col-1">Item 2</div>
  <div class="span-col-1">Item 3</div>
</div>

</body>
</html>
Re: CSS grid different number of columns 80 80

SimonIoa commented: what do you mean with div above the columns? +5

Exactly what I posted in my code snippet. Where the top and bottom divs are not part of columns.

commented: i did that doesnt work +0
Re: CSS grid different number of columns 80 80

You can try something like the below, play around so it works for you. When on mediascreens like smart phones, just change display options from i.e. inline to block etc.

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: V; }
.item2 { grid-area: A; }
.item3 { grid-area: T; }
.item4 { grid-area: P; }
.item5 { grid-area: V; }

.grid-container {
  display: grid;
  grid-template-areas:
    'V V V V V V'
    'A T T T P P'
    'A V V V V V';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>This grid layout contains six columns and three rows:</p>

<div class="grid-container">
  <div class="item1">V</div>
  <div class="item2">A</div>
  <div class="item3">T</div>  
  <div class="item4">P</div>
  <div class="item5">V</div>
</div>

</body>
</html>
commented: Thanks. it does make V as wanted . One pre row. But it show others (T,P,A) one per row it just divides each result (T,P,A) IN TWO COLUMNS - ONE ROW +5
Re: CSS grid different number of columns 80 80

i ve been tryin to solve this for a week now. Really what's wrong with this. (video should take two columns)

<div  class="grid-container">
    <div *ngFor="let media of allMedia">
      <div *ngIf="media.type==='V'" class="item1">
        {{media.title}}
      </div>
      <div *ngIf="media.type==='A'" >
         {{media.title}}
      </div>
      <div *ngIf="media.type==='P'" >**Bold Text Here**
        {{media.title}}
      </div>
      <div *ngIf="media.type==='T'">
        {{media.title}}
      </div>
    </div>
  </div>

 .grid-container {
  display: grid;
  background-color: #2196F3;
  grid-template-columns: 50% 50%;
}

.item1 {
  grid-area:  1 / span 2 / span 2 !important;
   border-style:solid;
  text-align:center
}

Screenshot_2020-06-07-Rovespier.jpg

commented: Not sure what you are asking, you need 2 columns where exactly? +14
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.