Bulma css - dividing tile child boxes in 2 equal width tiles

Question

Bulma css - dividing tile child boxes in 2 equal width tiles

1.3k views Asked by Leff At 08 September 2024 at 10:12

I am trying to make a layout where I have 2 parent tiles one is horizontal and takes up 8 columns and the other is vertical and takes up 4 columns. What I would like to do now is to have the child boxes in the parent horizontal tile, take each 50% of the width inside that parent tile. This is what I my code looks like:

    <div class="container">
        <div class="tile is-ancestor">
          <div class="tile is-parent is-8">
              <div v-for="article of latestNews" >
                 <div class="tile is-child box">
                    <div class="post-wrapper">
                     <span class="tag is-info">{{ article.tag }}</span>
                     <h4 class="title is-4">{{ article.title }}</h4>
                     <p>{{ main ? article.excerpt : article.created_at.date.substring(0, 10) }}</p>
                    </div>
                 </div>
              </div>
          </div>
          <div class="tile is-vertical is-4">
            <div v-for="article of mostReadNews" >
              <media-object :article="article" :main="true"></media-object>
            </div>
          </div>
      </div>
    </div>

Now, it looks like this:

I have tried adding to child box is-6 class, but that didn't work, what should I do?

Original Q&A

There are 1 answers

**Tedds** · Answer 1 · 2017-08-31 14:37:12

I guess markup might be a little messed up, try with this:

#tile1 {
  background-color: darkturquoise;
  height: 200px;
} 

#tile2 {
  background-color: tomato;
  height: 200px;
} 

#tile3 {
  background-color: aquamarine;
  height: 200px;
} 

#tile4 {
  background-color: slategray;
  height: 200px;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css">
</head>
  
<body>
  <div class="container">
    <div class="tile is-ancestor">
        <div class="tile is-4 is-parent" >
            <div class="tile is-child box" v-for="article of latestNews" id="tile1">
                <div class="post-wrapper">
                   <span class="tag is-info">{{ article.tag }}</span>
                     <h4 class="title is-4">{{ article.title }}</h4>
                     <p>{{ main ? article.excerpt : article.created_at.date.substring(0, 10) }}</p>
                </div>
             </div>
         </div>
      
        <div class="tile is-4 is-parent" >
            <div class="tile is-child box" v-for="article of latestNews" id="tile2">
                <div class="post-wrapper">
                   <span class="tag is-info">{{ article.tag }}</span>
                     <h4 class="title is-4">{{ article.title }}</h4>
                     <p>{{ main ? article.excerpt : article.created_at.date.substring(0, 10) }}</p>
                </div>
             </div>
         </div>      
      
         <div class="tile is-vertical is-parent is-4"  v-for="article of mostReadNews">
           
            <div class="tile is-child" id="tile3">
              
              <div v-for="article of mostReadNews" >
                <media-object :article="article" :main="true"></media-object>
              </div>
              
            </div>
           
            <div class="tile is-child" id="tile4">
              
              <div v-for="article of mostReadNews" >
                <media-object :article="article" :main="true"></media-object>
              </div>
              
            </div>

         </div>  
      
     </div>
</div>

<body>

I added some ids just to give the elements a background-color and some dimensions, they're meant to be removed.

I hope it helps!

TechQA.

Bulma css - dividing tile child boxes in 2 equal width tiles

There are 1 answers

Related Questions in CSS

Related Questions in BULMA

Popular Questions

Popular Tags

Trending Questions