Alternative div width for each row

Question

So basically I have this markup

<div class="container">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
</div>

How can I have an alternate width for the first and second div per row?

I tried article:nth-child+ diff to go to alternate divs, but I cannot find the correct stepping combination

Edit: I really can't edit the HTML structure, as this is a plugin for WordPress

Answer 1

You will need : nth-child () selector ...

In fact, here the sample is repeated after every 4th element ... So you need to be taregt 4n, 4n+1, 4n+2and4n+3

.container {
  display: flex;
  flex-wrap: wrap;
}

article {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border: 5px solid #fff;
  background: gray;
  box-sizing: border-box;
  color: #fff;
  font: bold 20px Verdana;
}

article:nth-child(4n),
article:nth-child(4n+1) {
  width: 25%
}

article:nth-child(4n+2),
article:nth-child(4n+3) {
  width: 75%
}

<div class="container">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
  <article>8</article>
  <article>9</article>
  <article>10</article>
  <article>11</article>
  <article>12</article>
</div>

Run code

Answer 2

, 66% 33%

Answer 3

1   2   3   4   5   6

article 
{
  float:left;
  height:50px;
  width: 30%;
  background: #444;
  margin: 0 0 5px 0;
}
article:nth-child(2n) {
  background: #f0f;
  width: 70%;
  float: right;
}
article:nth-child(3n) {
  width: 70%;
}
article:nth-child(4n) {
  width: 30%;
  float: right;
}

Answer 4

You can use flexbox. With display: flex; flex-wrap: wrap; on ".container" and flex-grow: 1; flex-shrink: 1; to the article. The article will get width based on the content.

You can do anything with flexbox, here is a good tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/