# Modifying Column Spans based on Item count

Active3 hr before
Viewed126 times

spansmodifyingcolumn
90%

What is "anti-geysering" and why would you turn it off 70 seconds before launch? ,Thanks for contributing an answer to Stack Overflow!, In JavaScript, how is awaiting the result of an async different than sync calls? , By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Here is my solution:

```\$tmpRet = array(
array(1),
array(1, 2, 3),
array(1, 2, 3, 4, 5, 6, 7),
array(1, 2, 3, 4, 5),
array(1, 2),
array(1, 2, 3, 4, 5, 6),
array(),
array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16),
array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
);
\$lencol = count(\$tmpRet);

echo '<table border="1" width="800px" cellpadding="10" cellspacing="5">'.PHP_EOL;
\$colspan = 4;

for(\$i = 0; \$i < \$lencol; \$i++) {
\$bg = 'style="background-color: #'.rand(100, 999).'"';
\$row = \$tmpRet[\$i];
\$lc = count(\$row);
\$offset = 0;

if (\$lc>\$colspan) {
\$ct = floor(\$lc/\$colspan);
\$offset = \$ct * \$colspan;
\$m = 0;
for (\$k = 0; \$k<\$ct; \$k++) {
echo '<tr '.\$bg.' >';
for (\$l = 0; \$l<\$colspan; \$l++) {
echo '<td>'.\$row[\$m].'</td>';
\$m++;
}
echo '<tr>';
}
}
\$mod = \$lc % \$colspan;
switch (\$mod) {
case 1:
echo '<tr '.\$bg.' ><td colspan="4">'.\$row[\$offset].'</td></tr>';
break;
case 2:
echo '<tr '.\$bg.' ><td colspan="2">'.\$row[\$offset].'</td><td colspan="2">'.\$row[\$offset+1].'</td></tr>';
break;
case 3:
echo '<tr '.\$bg.' ><td>'.\$row[\$offset].'</td><td>'.\$row[\$offset+1].'</td><td colspan="2">'.\$row[\$offset+2].'</td></tr>';
break;
}
}

echo '</table>';
```
88%

The column-span CSS property makes it possible for an element to span across all columns when its value is set to all.,The column-span property is specified as one of the keyword values listed below.,An element that spans more than one column is called a spanning element.,The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.

```/* Keyword values */
column - span: none;
column - span: all;

/* Global values */
column - span: inherit;
column - span: initial;
column - span: revert;
column - span: unset;```
72%

If you need an exact numbers of columns when designing a multi-column layout, use column-count.,column-count can be auto or an integer.,Given the number of columns, the browser will evenly distribute the content in exactly that number of columns.,This property can also be used in the shorthand for columns and can be used in tandem with column-width. When both properties are declared column-count is the maximum number of columns.

If you need an exact numbers of columns when designing a multi-column layout, use `column-count`.

```.lead {
column - count: 3;
}```
65%

6.1 Spanning An Element Across Columns: the column-span property ,6.1. Spanning An Element Across Columns: the column-span property ,6.1. Spanning An Element Across Columns: the column-span property ,6.1. Spanning An Element Across Columns: the column-span property (2)

```body {
column - width: 12 em
}```
75%

So far now I'm able to display the items in two columns but how can I merge two columns in one for specific position (i.e as item 7)?,In terms of item layout, you can use different ViewHolder in special position.,You need to know the value getSpanSize returned means weight, not column count.,Just create a table : In your case is is 8 rows and 3 columns, set the borderline and border alignment, item 7 and 14 will take 3 cells. Here an example :

Finally the solution that worked for me after exhaustive struggle is here:

```    @Override
public void onViewAttachedToWindow(MyViewHolder holder) {
super.onViewAttachedToWindow(holder);
ViewGroup.LayoutParams lp = holder.itemView.getLayoutParams();
if (lp != null &&
lp instanceof StaggeredGridLayoutManager.LayoutParams &&
(holder.getLayoutPosition() == 6 || holder.getLayoutPosition() == 13)) {
StaggeredGridLayoutManager.LayoutParams p = (StaggeredGridLayoutManager.LayoutParams) lp;
p.setFullSpan(true);
}
holder.setIsRecyclable(false);
}```
40%

The maximum width of a row.,Set the width of a grid column.,Column count for this row. null will use the default column count.,Number of columns to use.

```<div class="row">
<div class="columns small-2 large-4">
<!-- ... -->
</div>
<div class="columns small-4 large-4">
<!-- ... -->
</div>
<div class="columns small-6 large-4">
<!-- ... -->
</div>
</div>
<div class="row">
<div class="columns large-3">
<!-- ... -->
</div>
<div class="columns large-6">
<!-- ... -->
</div>
<div class="columns large-3">
<!-- ... -->
</div>
</div>
<div class="row">
<div class="columns small-6 large-2">
<!-- ... -->
</div>
<div class="columns small-6 large-8">
<!-- ... -->
</div>
<div class="columns small-12 large-2">
<!-- ... -->
</div>
</div>
<div class="row">
<div class="columns small-3">
<!-- ... -->
</div>
<div class="columns small-9">
<!-- ... -->
</div>
</div>
<div class="row">
<div class="columns large-4">
<!-- ... -->
</div>
<div class="columns large-8">
<!-- ... -->
</div>
</div>
<div class="row">
<div class="columns small-6 large-5">
<!-- ... -->
</div>
<div class="columns small-6 large-7">
<!-- ... -->
</div>
</div>
<div class="row">
<div class="columns large-6">
<!-- ... -->
</div>
<div class="columns large-6">
<!-- ... -->
</div>
</div>```