Changing column widths

Question

I currently created a side-by-side two column div at 50% each div. I'm trying to figure out how to make the left div 70% and the right div 30%.

Also, in addition to the 2 column divs. If I wanted to create a 4 col divs of 25% each and a five column div of 20% each. How would I do this?

.container-2col {
  clear: left;
  float: left;
  width: 100%;
  overflow: hidden;
  background: none;
}

.container-1col {
  float: left;
  width: 100%;
  position: relative;
  right: 50%;
  background: none;
}

.col1 {
  float: left;
  width: 46%;
  position: relative;
  left: 52%;
  overflow: hidden;
}

.col2 {
  float: left;
  width: 46%;
  position: relative;
  left: 56%;
  overflow: hidden;
}

<div class="container-2col">
  <div class="container-1col">
    <div class="col1">
      <p>Delicious and crunchy, apple fruit is one of the most popular and favorite fruits among the health conscious, fitness lovers who firmly believe in the concept of &ldquo;health is wealth.&rdquo; This wonderful fruit is packed with rich phyto-nutrients
        that, in the true sense, indispensable for optimal health. Certain antioxidants in apple have several health promoting and disease prevention properties, and thereby, truly justifying the adage, &ldquo;an apple a day keeps the doctor away.&rdquo;</p>
    </div>
    <div class="col2">
      <p>Vegetables, like fruits, are low in calories and fats but contain good amounts of vitamins and minerals. All the Green-Yellow-Orange vegetables are rich sources of calcium, magnesium, potassium, iron, beta-carotene, vitamin B-complex, vitamin-C,
        vitamin-A, and vitamin K.</p>
    </div>
  </div>
</div>

Here's my jsfiddle: http://jsfiddle.net/huskydawgs/zhckr47h/3/

Answer 1

There are several methods for creating multi-column layouts with CSS Grid.

Here's one way, featuring the grid-template-columns property and flexible (fr) lengths.

article {
  display: grid;
  grid-template-rows: 75px;
  grid-gap: 10px;
}

article:nth-child(1) {
  grid-template-columns: 7fr 3fr;
}

article:nth-child(2) {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

article:nth-child(3) {
  grid-template-columns: repeat(5, 1fr);
}

/* demo styles only */
article                 { margin-bottom: 2em; }
section:nth-child(odd)  { background-color: lightgreen; }
section:nth-child(even) { background-color: orange; }

<article>
  <section></section>
  <section></section>
</article>

<article>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>

<article>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>